Animated Scroll to Top （滚动回顶部）

最新推荐文章于 2024-09-01 07:16:25 发布

sysutangxiaoxi

最新推荐文章于 2024-09-01 07:16:25 发布

阅读量852

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014687259/article/details/24247689

本文介绍了如何创建一个滚动回顶部的功能。通过监听窗口滚动事件，当页面滚动超过100px时显示回顶部按钮，否则隐藏。点击按钮时，使用动画平滑地滚动到页面顶部，防止默认链接行为并阻止事件传播。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

越来越懒了=w=

demo:demo

<div id="pagewrap">
		<h2>
			<a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">Animated Scroll to Top</a>
		</h2>
		
		..........................

		<p id="back-top">
			<a href="#top"><span></span>Back to Top</a>
		</p>

</div>

用一个div包裹内容，里面主要内容是那个p id="back-top"的，作为滚动回顶部的按钮

#pagewrap{
		margin:0 auto;
		width:600px;
		padding-left:150px;
		position:relative;
	}



	#back-top{
		position:fixed;
		bottom:30px;
		margin-left:-150px;
	}
	#back-top a{
		width:108px;
		display:block;
		text-align:center;
		font:11px/100% Arial,Helvetica,sans-serif;
		text-transform:uppercase;
		text-decoration:none;
		color:#bbb;

		-webkit-transition:1s;
		-moz-transition:1s;
		transition:1s;
	}
	#back-top a:hover{
		color:#000;
	}
	#back-top span{
		width:108px;
		height:108px;
		display:block;
		margin-bottom:7px;
		background:#ddd url(up-arrow.png) no-repeat center center;

		-webkit-border-radius:15px;
		-moz-border-radius:15px;
		border-radius:15px;

		-webkit-transition:1s;
		-moz-transition:1s;
		transition:1s;
	}
	#back-top a:hover span{
		background-color:#777;
	}

里面有些transition来设置动作的缓和让效果看起来更加好

back-top div固定在底部

$(document).ready(function(){
		$('#back-top').hide();
		$(function(){
			$(window).scroll(function(){
				if($(this).scrollTop()>100){
					$('#back-top').fadeIn();
				}
				else
					$('#back-top').fadeOut();
			});

			$('#back-top').click(function(){
				$('body,html').animate({
					scrollTop:0
				},800);
				return false;
			})
		});
	});

JS部分也很简单，主要用jquery

先把#back-top隐藏起来

下面我们监控在窗口滚动的时候scroll 当scrollTop的值大于100px的时候把按钮渐进显示，小于的时候淡出

而点击按钮的时候，设定动画animate({属性,时间})神马的慢慢回滚到顶部最后return false去掉链接的默认事件和冒泡啊捕获神马的

大功告成，轻松自如如鱼得水水到渠成诚心诚意意大利面。