锚链接平稳滑动

最新推荐文章于 2021-06-07 13:10:05 发布

晓_枫

最新推荐文章于 2021-06-07 13:10:05 发布

阅读量222

点赞数 1

分类专栏： H5

H5 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

滑动到顶部，底部

        $( function () {
             var speed = 1000;//自定义滚动速度
            //回到顶部
             $( "#toTop").click( function () {
                 $( "html,body").animate({ "scrollTop" : 0 }, speed);
                 });
            //回到底部
            var windowHeight = parseInt($("body").css("height" ));//整个页面的高度
             $( "#toBottom").click(function () {
               $( "html,body").animate({ "scrollTop" : windowHeight }, speed);
            });
         });

滑动到指定位置

$('a[href*=#],area[href*=#]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
                    },
                    500);
                return false;
            }
        }
    });

a标签href 对应 id

监听url变化滚动

    window.addEventListener('popstate', function(event) {
//      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(location.hash);
            $target = $target.length && $target || $('[name=' + location.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                        scrollTop: targetOffset
                    },
                    500);
                return false;
            }
//      }
    });

转自：https://www.cnblogs.com/bore/p/9045216.html