2019-11-28 锚点定位+滚动

html:

<div id="block1">

.....

</div>

<div id="block2">

.....

</div>

<div id="block3">

.....

</div>

<div id="block4">

.....

</div>

<ul class="right_nav">

<li><a href="#block1">滚动到block1</li>

<li><a href="#block2">滚动到block2</li>

<li><a href="#block3">滚动到block3</li>

</ul>

scss:

.right_nav{

    position: fixed;

    width: 120px;

    bottom: 50px;

    right: 50%;

    margin-right: -700px;

        li{

            background: #394da4;

            padding: 12px;

            text-align: center;

            font-size: 12px;

            color: white;

            margin-bottom: 10px;

            a{

                color: white;

                font-size: 20px;

            }

        }

   }

js:

window.onscroll = function () {

    var t = document.documentElement.scrollTop || document.body.scrollTop;

     if (t > 550) {   //当滚动条滚动距离大于550px时侧边栏出现

           $('.right_nav').css("display", "block")

     }

    if (t < 550) {

        $('.right_nav').css("display", "none")

    }

}

$(".right_nav a").click(function () {

      $("html, body").animate({

           scrollTop: $($(this).attr("href")).offset().top + "px"   #滚动高度

      }, {

            duration: 500,

             easing: "swing"

    });

    return false;

});