jQuery创建平滑的页面滚动(顶部或底部)

当我们需要在网页中创建平滑的页面滚动时，可以通过使用jQuery的动画效果实现。下面是实现平滑滚动的完整攻略。

步骤一：添加jQuery库

在网页头部添加jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤二：添加HTML结构

在网页中添加需要滚动到的内容，并为滚动按钮添加ID。

<a href="#" id="top-btn">回到顶部</a>
<div id="content">
  <!-- 网页内容 -->
</div>
<a href="#" id="bottom-btn">滚动到底部</a>

步骤三：添加CSS样式

为滚动按钮添加样式，并设置内容区域的高度和溢出属性。

a {
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  margin: 10px;
}
#content {
  height: 2000px;
  overflow: auto;
}

步骤四：添加JavaScript代码

• 滚动到顶部：点击“回到顶部”按钮后，页面将平滑地滚动到页面顶部。

$(document).ready(function() {
  // 回到顶部
  $('#top-btn').click(function() {
    $('html,body').animate({scrollTop: 0}, 500);
  });
});

• 滚动到底部：点击“滚动到底部”按钮后，页面将平滑地滚动到页面底部。

$(document).ready(function() {
  // 滚动到底部
  $('#bottom-btn').click(function() {
    $('html,body').animate({scrollTop: $('#content').height()}, 500);
  });
});

示例说明

以下是两个示例，分别是回到顶部和滚动到底部的按钮。

示例一：回到顶部

点击“回到顶部”按钮，页面将平滑地滚动到页面顶部。

<a href="#" id="top-btn">回到顶部</a>
<div id="content">
  <!-- 页面内容 -->
</div>

$(document).ready(function() {
  // 回到顶部
  $('#top-btn').click(function() {
    $('html,body').animate({scrollTop: 0}, 500);
  });
});

示例二：滚动到底部

点击“滚动到底部”按钮，页面将平滑地滚动到页面底部。

<a href="#" id="bottom-btn">滚动到底部</a>
<div id="content">
  <!-- 页面内容 -->
</div>

$(document).ready(function() {
  // 滚动到底部
  $('#bottom-btn').click(function() {
    $('html,body').animate({scrollTop: $('#content').height()}, 500);
  });
});