欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

经典的回到页面顶端 博客分类: JavaScript,jQuery htmlJavaScript回到顶端

程序员文章站 2024-03-09 11:21:17
...

经典的回到页面顶端,当页面滚动到一定的高度时,给一个回到顶端的小提示,可以很方便的滚动到顶端,省去鼠标滚动和拖动滚动条.直接贴代码(需引入jQuery.js):

JS:

 

$(function(){
	// 滚动窗口来判断按钮显示或隐藏
	$(window).scroll(function() {
		if ($(this).scrollTop() > 150) {
			$('.back-to-top').fadeIn(100);
		} else {
			$('.back-to-top').fadeOut(100);
		}
	});
	
	// jQuery实现动画滚动
	$('.back-to-top').click(function(event) {
		event.preventDefault();
		$('html, body').animate({scrollTop: 0}, 500);
	})
})

 CSS:

 

<style type="text/css">
	.back-to-top:hover {
		background-color: rgba(0, 0, 0, 0.3);
	}
	.back-to-top {
		position: fixed;
		bottom: 3em;
		right: 3em;
		text-decoration: none;
		color: #EEEEEE;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 12px;
		padding: 1em;
		display: none;
		border-radius: 3px;
		border: 1px solid #CCCCCC;
	}
</style>

 HTML:

 

<footer>
	<hr>
	<a href="#" class="back-to-top" style="display: inline;">回到顶端</a>
</footer>