jquery 回到顶部

回到顶部

使用延迟，减少浏览器符合，功能更友好

页面滚动一定距离显示和隐藏

css

* {
				margin: 0;
				padding: 0;
			}
			
			.totop_wrap {
				display: none;
				position: fixed;
				bottom: 100px;
				right: 30px;
				padding: 20px 10px;
				background: #ccc;
				color: #fff;
			}

html

<div class="totop_wrap js_totop_wrap">
			回到顶部
		</div>

js

<!--jquery-->
		
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

		<!--javascript-->
		<script type="text/javascript">
			$(function() {
				/**
				 * 回到顶部
				 * 使用延迟，减少浏览器负荷，增加用户友好
				 * */
				var gtTimer = 0;
				$(window).scroll(function() {
					if(gtTimer) {
						clearTimeout(gtTimer);
						gtTimer = 0;
					}
					gtTimer = setTimeout(function() {
						var srollTop = $(document).scrollTop();
						if(srollTop > 500) {
							$('.js_totop_wrap').fadeIn(300);
						} else {
							$('.js_totop_wrap').fadeOut(300);
						}
					}, 300);
				});


			});
		</script>