页面滚动(锚点跳转)

在学习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毫秒内滚动到。

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80717214
今日推荐