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;
});
