经典的回到页面顶端
经典的回到页面顶端
lgscofield 发表于2年前
经典的回到页面顶端
  • 发表于 2年前
  • 阅读 3
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

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

 

共有 人打赏支持
lgscofield
粉丝 20
博文 105
码字总数 62676
×
lgscofield
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: