锚链接 平稳滑动


         滑动到顶部,底部

        $( 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

猜你喜欢

转载自blog.csdn.net/qq_18676843/article/details/88549964