jQuery平滑返回顶部_jQuery实现的带二维码的平滑返回顶部效果例子
2014-10-05 10:41:03  By: shinyuu

jQuery平滑返回顶部的例子、例子使用了jquery-1.8.3.min.js的版本、完美的解决了兼容性问题

本例子兼容：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等浏览器

话不多说、先来看看程序效果吧

注意：只有当滚动条下滑了才会出来最下面的返回顶部按钮

HTML代码 

<body>
<div class="bottom_tools">
  <div class="qr_tool">二维码</div>
  <a id="feedback" href="http://dwtedx.com" title="意见反馈">意见反馈</a>
  <a id="scrollUp" href="javascript:;" title="飞回顶部"></a>
  <img class="qr_img" src="images/qr_img.png">
</div>
<div class="page-body"></div>
<div class="page-footer"></div>
</body>


JS代码 

$(function(){
	var $body = $(document.body);;
	var $bottomTools = $(´.bottom_tools´);
	var $qrTools = $(´.qr_tool´);
	var qrImg = $(´.qr_img´);
		$(window).scroll(function () {
			var scrollHeight = $(document).height();
			var scrollTop = $(window).scrollTop();
			var $footerHeight = $(´.page-footer´).outerHeight(true);
			var $windowHeight = $(window).innerHeight();
			scrollTop > 50 ? $("#scrollUp").fadeIn(200)
				.css("display","block") : $("#scrollUp").fadeOut(200);			
			$bottomTools.css("bottom", 
				scrollHeight - scrollTop - $footerHeight > $windowHeight 
				? 40 : $windowHeight + scrollTop
				+ $footerHeight + 40 - scrollHeight);
		});
		$(´#scrollUp´).click(function (e) {
			e.preventDefault();
			$(´html,body´).animate({ scrollTop:0});
		});
		$qrTools.hover(function () {
			qrImg.fadeIn();
		}, function(){
			 qrImg.fadeOut();
		});
});

当然这里还有一部分CSS代码、和必要的jQuery插件、下面我把整个例子的代码贴出来

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/18NaFG 密码: lx8y

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛

点赞 (0) 吐槽

猜你喜欢的

快速评论

Email必须输入

表情

评论

技术评论
DD记账
top
+