页脚中插入页码的简单步骤

2023-09-28 08:01:58

为了响应您的请求，我将编写一篇关于在网页页脚插入页码的博文。以下文章包含了该主题的相关 SEO 优化信息：

作为一名内容创作者，确保您的博客或网站上的每一篇文章都具有专业的外观非常重要。其中一个关键方面是为您的内容添加页码。页码不仅可以让读者轻松跟踪他们在文章中的位置，还可以改善您的网站的整体外观和可信度。

添加页码可能看起来很复杂，但实际上只需几个简单的步骤即可完成。在本指南中，我们将向您展示如何使用 HTML 和 CSS 在页脚中插入页码。

添加 HTML

首先，您需要在页脚部分添加以下 HTML 代码：

<div class="pagination">
  <p>第 <span id="current-page"></span> 页共 <span id="total-pages"></span> 页</p>
</div>

这段代码将创建一个容器，其中将显示页码。

添加 CSS

接下来，您需要添加以下 CSS 代码来设置页码的样式：

.pagination {
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

#current-page, #total-pages {
  font-weight: bold;
}

这段代码将页码居中对齐、设置字体大小并为当前页码和总页码添加粗体样式。

添加 JavaScript

最后，您需要添加以下 JavaScript 代码来动态更新页码：

const currentPage = document.getElementById("current-page");
const totalPages = document.getElementById("total-pages");

// 获取当前页码和总页码
currentPage.innerHTML = 1;
totalPages.innerHTML = 5; // 假设一篇文章有 5 页

// 添加事件监听器以更新页码
window.addEventListener("scroll", () => {
  // 计算当前页码
  const scrollTop = document.documentElement.scrollTop;
  const pageHeight = document.documentElement.scrollHeight;
  const viewportHeight = window.innerHeight;
  const currentPageNumber = Math.ceil(scrollTop / (pageHeight - viewportHeight)) + 1;

  // 更新页码
  currentPage.innerHTML = currentPageNumber;
});