jQuery平滑返回顶部_jQuery实现的带二维码的平滑返回顶部效果例子
程序员文章站
2022-03-01 15:01:08
...
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
推荐阅读