博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery仿新浪网“返回顶部”效果
阅读量:4150 次
发布时间:2019-05-25

本文共 1000 字,大约阅读时间需要 3 分钟。

(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(); }); })();

 

 

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代码 写在HTML下面

 

 

转载地址:http://zvlti.baihongyu.com/

你可能感兴趣的文章
java杂记
查看>>
RunTime.getRuntime().exec()
查看>>
Oracle 分组排序函数
查看>>
删除weblogic 域
查看>>
VMware Workstation 14中文破解版下载(附密钥)(笔记)
查看>>
日志框架学习
查看>>
日志框架学习2
查看>>
SVN-无法查看log,提示Want to go offline,时间显示1970问题,error主要是 url中 有一层的中文进行了2次encode
查看>>
NGINX
查看>>
Qt文件夹选择对话框
查看>>
DeepLearning tutorial(7)深度学习框架Keras的使用-进阶
查看>>
人脸识别(OpenCV+Python)
查看>>
6个强大的AngularJS扩展应用
查看>>
第三方SDK:讯飞语音听写
查看>>
第三方SDK:JPush SDK Eclipse
查看>>
第三方开源库:imageLoader的使用
查看>>
自定义控件:飞入飞出的效果
查看>>
自定义控件:动态获取控件的高
查看>>
第三方开源库:nineoldandroid:ValueAnimator 动态设置textview的高
查看>>
第三方SDK:百度地图SDK的使用
查看>>