javascript中制作一个滚动条回到顶部的效果。

当滚动条滚动一定高度时,回到顶部的小按钮出现,点击回到顶部小按钮,滚动条慢慢回到顶部。

HTML布局

<div class="active">								<!-- 大框 -->
			<div class="wrapper">							<!-- 设置小窗口 -->
				<div class="acc"></div>						<!-- 让小窗口产生滚动条 -->
				<div class="dis" onclick="backTop()"></div> <!-- 点击事件 -->
			</div>
		</div>

CSS样式

<style>
			*{
				margin: 0;
				padding: 0;
			}
			.active{			/* 大框设置宽高、相对定位 */
				width: 300px;
				height:400px;
				position: relative;
			}
			.wrapper{			/* 小窗口设置宽高、内边距和外边框、产生滚动条 */
				width: 300px;
				height:400px;
				padding: 20px;
				border: 10px solid black;
				overflow: auto;
				
				
			}
			
			.dis{					/* 	点击事件的宽高、背景色和绝对定位、隐藏设置	 */
				width: 50px;
				height: 50px;
				background-color: limegreen;
				position:absolute;
				left: 270px;
				bottom: 0;
				display: none;
				
			}
			.acc{					/* 让小窗口产生滚动条、设置宽高背景色 */
				width: 30px;
				height: 800px;
				background-color: gray;
			}
		</style>

JS动态

<script>
		
			var _wrapper=document.querySelector(".wrapper");//获取wrapper
			var _dis=document.querySelector(".dis");		//获取dis
			_wrapper.onscroll=function(){					//写滚动事件
				var TopDistance=_wrapper.scrollTop;			//获取Y轴滚动的距离	
				if(TopDistance>=100){						//如果距离大于等于100
						_dis.style.display="block";			//dis样式为显示
					}else{									//否则
						_dis.style.display="none";			//dis样式为隐藏
					}
				}
				
			function backTop(){						//backTop点击时间
				var wrapperY=_wrapper.scrollTop;	//获取Y轴滚动的距离
				var id=setInterval(function(){		//定时器函数
					if(wrapperY<=0){				//如果wrapperY轴小于等于0
						clearInterval(id);			//停止计时器
					}								
					wrapperY-=5;					
					_wrapper.scrollTop=wrapperY;	
				},10);	
			}
		</script>

最后看一下效果

 

  • 2
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

加加加加11

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值