//CSS代码:
.backToTop {
display: none;
width: 18px;
line-height: 1.2;
padding: 5px 0;
background-color: #000;
color: #fff;
font-size: 12px;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
// JS代码:
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
if (!window.XMLHttpRequest) {
$backToTopEle.css("top", st + winh - 166);
}
};
$(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();
分享到:
相关推荐
jquery返回顶部代码,底部小火箭样式,点击返回顶部
图翼网侧边jQuery返回顶部代码是一款鼠标经过二维码图标会显示微信二维码,点击指南图标会弹出自定义的弹出层,点击返回顶部图标会跳转到页面顶部。
代码简介:简单实用jQuery返回顶部代码是一款鼠标划过二维码图标会缩放弹出二维码图片,效果实用,代码简单。
jquery返回顶部代码实例
Jquery返回顶部代码,兼容各种浏览器,使用简单。直接页面加链接。
腾讯网首页jQuery返回顶部代码基于jquery.js制作,默认只显示用户反馈和相关链接的按钮,当鼠标滚动到页面底部时返回顶部按钮才会出现!
蓝色jQuery返回顶部代码是一款基于jQuery制作的平滑返回顶部效果代码,蓝色风格,淡入淡出效果,鼠标向下滚动即可显示返回顶部按钮,点击按钮平滑返回顶部,兼容各大浏览器!
代码简介:jQuery平滑返回顶部代码是一款实用的带二维码jQuery返回顶部代码。
jQuery右端悬浮带返回顶部代码
效果比较好的jQuery返回顶部代码
jquery返回顶部隐藏按钮
JQUERY返回顶部功能带微信二维码和新闻提示 JQUERY返回顶部功能带微信二维码和新闻提示
一款不错的网站客服代码,jQuery右侧边栏二维码QQ客服返回顶部代码。
代码简介:jQuery返回顶部跟底部浮窗代码是一款带有上下箭头跟留言按钮的jQuery悬浮网页右侧中间浮动窗口特效代码。
猪八戒网jQuery返回顶部代码基于jquery-1.7.2.min.js制作,有淡入淡出效果!