点击时滚动条滚动到相应位置

时间：2020-02-25 21:25:50 阅读：88 评论：0 收藏：0 [点我收藏+]

效果图(点击左侧1F 2F 3F时候页面跳转到相应位置);

技术分享图片

1.HTML部分:

</ul>

</ul>

</div>

2.css部分

.d99{

width: 32px;

height: 239px;

margin-left: 105px;

z-index: 1000;

top: 260px;

position: fixed;

cursor: pointer;

}

.d99 .d100 li{

width: 32px;

height: 35px;

line-height: 35px;

color: #615f5f;

position: relative;

text-align: center;

font-size: 13px;

border-bottom: 1px dotted #c2c2c2;

}

.d99 .d100 li img{

width: 32px;

height: 45px;

}

.d101 li{

width: 32px;

height: 35px;

line-height: 16px;

position: relative;

text-align: center;

font-size: 13px;

color: #ffffff;

background: #00b0f9;

}

.r6{

margin-top: -216px;

display: none;

}

.r7{

margin-top: -180px;

display: none;

}

.r8{

margin-top: -144px;

display: none;

}

.r9{

margin-top: -108px;

display: none;

}

.r10{

margin-top: -72px;

display: none;

}

3.js部分:

$(window).scroll(function () { //首先让左侧部分显示出来

if ($(window).scrollTop() > 650) {

$(".d99").css("position", "fixed");

$(".d99").css("display", "block");

} else {

$(".d99").css("position", "static");

$(".d99").css("display", "none");

}

})

$(window).scroll(function(){ //滚动到哪里谁的背景颜色显示出来

if($(window).scrollTop()>630){

$(".r6").css("display","block");

}else{

$(".r6").css("display","none");

}

})

$(window).scroll(function(){

if($(window).scrollTop()>1200){

$(".r6").css("display","none");

$(".r7").css("display","block");

}else{

$(".r7").css("display","none");

}

})

$(window).scroll(function(){

if($(window).scrollTop()>1740){

$(".r6").css("display","none");

$(".r7").css("display","none");

$(".r8").css("display","block");

}else{

$(".r8").css("display","none");

}

})

$(window).scroll(function(){

if($(window).scrollTop()>2310){

$(".r6").css("display","none");

$(".r7").css("display","none");

$(".r8").css("display","none");

$(".r9").css("display","block");

}else{

$(".r9").css("display","none");

}

})

$(window).scroll(function(){

if($(window).scrollTop()>2800){

$(".r6").css("display","none");

$(".r7").css("display","none");

$(".r8").css("display","none");

$(".r9").css("display","none");

$(".r10").css("display","block");

}else{

$(".r10").css("display","none");

}

})

$(window).scroll(function(){

if($(window).scrollTop()>3300){

$(".r10").css("display","none");

}

})

$(".r1").click(function(){ //点击谁的时候滚动到相应位置

$(‘body,html‘).animate({scrollTop:$(".b1").offset().top-70},1000)

})

$(".r2").click(function(){

$(‘body,html‘).animate({scrollTop:$(".b2").offset().top-70},1000)

})

$(".r3").click(function(){

$(‘body,html‘).animate({scrollTop:$(".b3").offset().top -70},1000)

})

$(".r4").click(function(){

$(‘body,html‘).animate({scrollTop:$(".b4").offset().top-70},1000)

})

$(".r5").click(function(){

$(‘body,html‘).animate({scrollTop:$(".b5").offset().top-70},1000)

})

欢迎各位大神指点评论或者有简单方法欢迎留言;

点击时滚动条滚动到相应位置

原文：https://www.cnblogs.com/lxc127136/p/12363819.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)