经典的回到页面顶端

阅读更多

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

 

 HTML:

 

 

你可能感兴趣的:(html,JavaScript,回到顶端)