实现点击锚点平滑滚动至指定位置

2024-06-28 23:06| 来源: 网络整理| 查看: 265

1.简介

a标签的href 属性用于指定超链接目标的 URL，能够跳转到href中指定的页面或指定的位置。锚点能够跳转到当前页面中指定的位置，使用id来使用锚定URL。点击链接到标题即可跳转到这是标题，底部链接可以链接到这模块.

这是标题，底部链接可以链接到这链接到标题

但是在实际应用中，点击后直接跳转到页面的指定位置，无动画，跳转过程很生硬。可以通过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毫秒。

【本文地址】

公司简介

联系我们