美文网首页
平滑瞄点滚动

平滑瞄点滚动

作者: Roadsun | 来源:发表于2017-12-06 15:33 被阅读0次
<a id="submit" href="#" page-scroll="#second">submit</a>
<div style="width: 100%;height: 100vh;background-color: red" id="first"></div>
<div style="width: 100%;height: 100vh;background-color: yellow" id="second"></div>
 $(document).ready(function() {
        $.scrollTo = function(selectDom,scrollTime){
            $(selectDom).click(function(){
                //获取要滚动到的节点
                var scrollToDom = $(this).attr("page-scroll");
                //添加动画
                $("html,body").animate({
                        //获取要滚动到的节点距文档(document)顶部的位置
                        scrollTop:$(scrollToDom).offset().top,
                    },
                    //定义动画执行的时间
                    scrollTime
                );
            });
        };
        $.scrollTo("#submit",1000);
    })
scroll.gif

相关文章

网友评论

      本文标题:平滑瞄点滚动

      本文链接:https://www.haomeiwen.com/subject/lyakixtx.html