网页效果达到页面滚动(锚点跳转)

时间: 2024-11-10 admin IT培训

网页效果达到页面滚动(锚点跳转)

网页效果达到页面滚动(锚点跳转)

问题:在学习a元素的时候通过指定id可以将页面跳转到指定的位置,但是这个过程是瞬间跳转并没有一个滚动的效果,用户体验不是很好,能不能达到滚动效果

解决:

a标签的直接用法,也就是瞬间跳转:<a href="#id">跳转</a>

在JQ动画中,有一个animate()方法,这个方法是动画效果,使用这个方法可以达到滚动效果,具体示例是:   

 $("#id1").on("click",function () {$("html,body").animate({scrollTop:$("#id2").offset().top},1000);});

通过点击id1,滚动到id2的位置,这里使用了animate方法,计算了id2距离顶部的距离,并且在1000毫秒内滚动到。