网页返回顶部功能demo实现

功能描述: 在页面右下角距离底部30px,距离右边30px的地方显示一个返回顶部的按钮,当刷新页面时按钮默认隐藏, 当滚动页面到一个页面的高度时显示返回顶部按钮,当向上滚动到滚动条位置不足一个页面高度时隐藏返回顶部按钮。

实现代码如下:

html代码

<!-- 返回顶部 start -->
<button type="button" class="btn btn-primary btn-sm back-to-top" id="back-to-top">
  <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>&nbsp;&nbsp;返回顶部
</button>
<!-- 返回顶部 end -->

css代码

/**-----------------返回顶部----------------------start*/
.back-to-top{
	position : fixed;
	bottom: 30px;
	right: 30px;
	height: 40px;
	border: 1px solid #888;
	opacity:.9;
	display: none;
}
/**-----------------返回顶部----------------------end*/

js代码

$(function(){
	/**给返回顶部按钮绑定事件 -start*/
	if($("#back-to-top")[0]){
		$("#back-to-top").bind("click",function(){
			$("html,body").animate({
				scrollTop : 0
			},800);
		});
		//监听window对象的滚动事件
		$(window).bind("scroll",function(){
			//当滚动高度大于页面高度时显示返回顶部按钮
			if($(window).scrollTop() > $(window).height())
				$("#back-to-top").fadeIn();
			else
				$("#back-to-top").fadeOut();
		});
	}
	/**给返回顶部按钮绑定事件 -end*/
});

至于最终的效果请查看itnoteshare网站的效果,此代码及itnoteshare网站源码。 以上是第一种效果

下面实现第二种效果

该效果将返回顶部和二维码结合在一起

html代码

<!-- 返回顶部 start -->
<div class="hidden-xs hidden-sm back-to-top">
	<a class="border-bottom" id="backtop" href="#" style="display: none;">回顶部</a>
	<div class="qrcodeWraper">
		<a href="/app#qrcode"><span class="glyphicon glyphicon-qrcode"></span></a>
		<img class="border" id="qrcode" alt="赞助"	src="${ctx}/commonImages/thanks.png">
		<p class="qrcode-text">赞助</p>
	</div>
</div>
<!-- 返回顶部 end -->

css代码

/**-----------------返回顶部----------------------start*/
.back-to-top {
	position: fixed;
	right: 40px;
	bottom: 40px;
	border: 1px solid #ddd;
	background: #fff;
	width: 36px;
	text-align: center;
	border-radius: 2px;
	line-height: 1.25;
	z-index: 1000;
}

.back-to-top a {
	padding: 10px;
	display: block;
	color: #999;
	text-decoration: none;
	border-bottom: 1px solid #ddd;
}

.back-to-top a:hover {
  background: #f3f3f3;
  text-decoration: none
}

.back-to-top .qrcodeWraper {
  position: relative
}

.back-to-top .qrcodeWraper {
  position: relative
}

.back-to-top .qrcodeWraper .qrcode-text {
  position: absolute;
  width: 111px;
  left: -120px;
  display: none;
  color: #666;
  margin: 0;
  padding: .5rem;
  background-color: #fff;
  line-height: 1;
  z-index: -1
}

.back-to-top .qrcodeWraper:hover #qrcode,.back-to-top .qrcodeWraper:hover .qrcode-text {
  display: block
}

.back-to-top #qrcode {
  display: none;
  position: absolute;
  width: 206px;
  height: 290px;
  left: -206px;
  bottom: -1px;
  padding: 5px;
  background: #fff;
  border-radius: 2px;
  background: #f3f3f3;
}

/**-----------------返回顶部----------------------end*/

js代码

$(function(){
	/**给返回顶部按钮绑定事件 -start*/
	if($("#backtop")[0]){
		$("#backtop").bind("click",function(){
			$("html,body").animate({scrollTop : 0});
		});
		//监听window对象的滚动事件
		$(window).bind("scroll",function(){
			//当滚动高度大于页面高度时显示返回顶部按钮
			if($(window).scrollTop() > $(window).height())
				$("#backtop").show();
			else
				$("#backtop").hide();
		});
	}
	/**给返回顶部按钮绑定事件 -end*/
});

浏览 626 评论 0 赞 0 砸 0 标签: jquery demo javascript
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款