按元素 id 平滑滚动按钮 - Html

在前端开发中，我们经常需要实现滚动到页面中的某个元素，这时候就需要使用平滑滚动的效果，而不是直接跳转到目标元素位置。本文将介绍如何使用 Html 和 JavaScript 实现一个按元素 id 平滑滚动的按钮。

前提条件

在实现之前，需要确保所在的网页中已经包含以下两个 cdn 链接：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

实现步骤

1. 首先，需要在页面中设置需要滚动到的目标元素的 id 属性，例如：

<h1 id="target">目标元素</h1>

2. 接着，在页面中添加一个按钮，并为其添加一个点击事件的监听器，代码如下：

<button onclick="scrollToTarget()">滚动到目标元素</button>

其中，onclick 事件的监听器为 scrollToTarget() 方法，代码如下：

function scrollToTarget() {
  $('html, body').animate({
    scrollTop: $('#target').offset().top
  }, 1500, 'easeInOutExpo');
}

3. 最后，需要在页面中添加一个 css 样式来美化按钮，代码如下：

button {
  background-color: #428bca;
  border: none;
  color: #fff;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 5px;
}

如何使用

将以上三个部分的代码分别添加到需要实现功能的网页之中即可，记得将其中的目标元素 id 修改为你自己网页中的元素 id。

总结

本文介绍了如何使用 Html 和 JavaScript 实现一个按元素 id 平滑滚动的按钮。通过以上步骤，我们可以轻松地为网页增加平滑滚动的效果，提高用户体验。