jQuery实现点击回到顶部

最新推荐文章于 2025-07-27 09:59:07 发布

Avis_Mistra

最新推荐文章于 2025-07-27 09:59:07 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

文章标签： js 回到顶部源码平滑滚动到顶部源码

本文链接：https://blog.youkuaiyun.com/Avis_Mistra/article/details/82782554

本文介绍如何使用CSS和JavaScript实现网页元素的平滑滚动效果。通过设置固定的底部按钮和列表项样式，结合JavaScript定时器，使得点击按钮时页面能够平滑滚动至顶部。

css

*{margin: 0;padding: 0;}
			a{display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;background: #66aeff;color: #fff;position: fixed;bottom: 10px;right: 10px;}
			ul>li{list-style: none;}
			ul{margin-left:10%;width: 80%;height: 1550px;display: flex;flex-direction: column;justify-content: center;align-items: center;}

html

		<ul>
			<li class="first">第一个</li>
			<li>第二个</li>
			<li class="second">第三个</li>
			<li class="tir">第四个</li>
			<li class="tir"><a>第五个</a></li>
		</ul>
		<a class="goTop" href="javascript:;"></a>

//		瞬间回到顶部
//		$(".goTop").click(function(){
//			//scrolltop返回或设置匹配元素的滚动条的垂直位置。
//			$("html,body").scrollTop(0);
//		})
//平滑滚动到顶部
$(".goTop").click(function(){
	//总距离
	var $page = $("html,body")
	var distance = $("html").scrollTop()+$("body").scrollTop()
	//总时间
	var time = 2000
	//间隔时间
    var intervalTime = 50  //其值越小滚动越平滑
	var itemDistance = distance/(time/intervalTime)
	//使用循环定时器不断滚动
	var intervalId = setInterval(function(){
		distance -= itemDistance
	//到达顶部停止定时器
		if(distance<=0){
			distance=0 //修改其值
			clearInterval(intervalId)
	}
		$page.scrollTop(distance)
	},intervalTime)
})