jQuery实现锚点向下平滑滚动特效示例

实现效果：

实现原理：

使用jQuery动画()方法实现页面平滑滚动特效

$('html，body ').制作动画({scrollTop: $(hash)).偏移量()。top}，800，function(){ window。位置。hash=hash});简单实例代码：

！DOCTYPE html html head script src=' http :https://Ajax。谷歌API。com/Ajax/libs/jquery/3。2 .1/jquery。量滴js '/script脚本$(文档)。就绪(函数(){ //为所有链接$('a ')添加平滑滚动on('click ')，function(event) { //在重写默认行为之前，请确保这个.哈希有值if (this.hash！=='') { //防止默认锚点点击行为事件。prevent default()；//存储哈希var hash=this.hash//使用jQuery的动画()方法添加平滑的页面滚动//可选数字(800)指定滚动到指定区域$('html，body ')所需的毫秒数。制作动画({ scrollTop: $(hash)).偏移量()。top }，800，function(){ //完成滚动时将哈希(#)添加到网址(默认点击行为)窗口。位置。hash=hash});}//End if })；});/script stylebody，html .主{高度： 100%；}截面{最小高度：100%；}/style/header dya href=' # section 2 ' rel=' external no follow ' style=' font-size : 30px；字体粗细：粗体；文本对齐：中心点击此处平滑滚动到第二部分/adiv class=' main ' section/section/div class=' main ' id=' section 2 ' section style='底色： # 03c 03 c；color : # ffffont-size : 30px；文本对齐：中心SECTION 2 /section/div/body/html以上这篇jQuery实现锚点向下平滑滚动特效示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。