1.简介
a标签的href 属性用于指定超链接目标的 URL，能够跳转到href中指定的页面或指定的位置。
锚点能够跳转到当前页面中指定的位置，使用id来使用锚定URL。
点击链接到标题即可跳转到这是标题，底部链接可以链接到这模块.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<a id="top">这是标题，底部链接可以链接到这</a>
</div>
<div>
<a href="#top">链接到标题</a>
</div>
</body>
</html>
但是在实际应用中，点击后直接跳转到页面的指定位置，无动画，跳转过程很生硬。
可以通过css/js两种方式实现点击锚点平滑滚动至指定位置。
2.实现方式
2.1 css实现
将scroll–behavior:smooth写在滚动容器元素上，可以让容器的滚动变得平滑。
html, body {
position: relative;
height: 100%;
scroll-behavior: smooth;
}
scroll–behavior 属性为一个滚动框指定滚动行为
scroll-behavior： smooth | auto ;
auto （默认值）：表示滚动框立即滚动到指定位置。
smooth ：表示在页面滚动时采用平滑滚动，不直接滚动到指定位置，例如回到顶部按钮和锚点。
3.1 js实现
$("a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;
});
offset() 方法设置或返回被选元素的left或者top相对于文档的偏移坐标。（注：offset()方法时jquery的方法，需要引入jquery才能使用。）
$(".div").offset() 获得位移对象
$(".div").offset().top 获得位移高度
$(this).attr(“href”) 是获取你所点击的a标签的href属性值。
scrollTop() 方法设置或返回被选元素的垂直滚动条位置，例如scrollTop: 100px 就是滑动到距离顶部100px处。
animate() 方法通过 CSS 样式将元素从一个状态改变为另一个状态,CSS属性值是逐渐改变的，这样就可以创建动画效果。1000则是指动画完成时间：1000毫秒。
如果对你有所帮助，请记得一键三联哦
原文地址:https://blog.csdn.net/weixin_49098968/article/details/128905772
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_39102.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
