当前位置: 编程技术>jquery
jquery实现返回顶部的例子
来源: 互联网 发布时间：2014-10-08
本文导语: jquery实现网页“返回顶部”的功能，这里介绍两种实现方法。 第一种，不使用jquery插件来实现。 代码示例: 使用jquery实现网页“返回顶部”的例子_www. .backToTop{display:none; width:18px; line-height:1.2; padding:5px 0; ba...
jquery实现网页“返回顶部”的功能，这里介绍两种实现方法。
第一种，不使用jquery插件来实现。
代码示例:
使用jquery实现网页“返回顶部”的例子_www.
.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);}
测试内容
测试内容 2
测试内容 3
测试内容 4
测试内容 5
测试内容 6
测试内容 7
测试内容 8
中间部分自己加
测试内容 92
测试内容 93
测试内容 94
测试内容 95
测试内容 96
测试内容 97
测试内容 98
测试内容 99
测试内容00
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('').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(); });
})();
第二种：使用现有插件go-top.js实现。
首先，请引入go-top.js插件
然后，在页面里添加以下CSS定义：
a#go-top{background:#E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}
a#go-top:hover{background:#CCC;color:#333;}
a#go-top:hover{background:#CCC;color:#333;}
最后在页面结束标签之前加入代码:
代码示例:
/* (new GoTop()).init({
pageWidth:980,
nodeId:'go-top',
nodeWidth:50,
distanceToBottom:125,
hideRegionHeight:130,
text:'Top'
});
/* ]]> */
以上分享了jquery实现返回顶部的两种方法，希望对大家有所帮助。
您可能感兴趣的文章：
- js滚动条回到顶部示例代码
- 页面回到顶部的三种实现方法(锚标记，js)
- jquery与css实现返回顶部的效果代码
- jquery返回顶部效果(兼容IE6)的实现代码
- jquery实现固定在顶部的菜单
- html中返回页面顶部的写法
- jQuery智能顶部滚动条加锚点
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。