jquery结合css实现返回顶部功能 jquery结合css实现返回顶部功能

css操作

CSS$("").css(name|pro|[,val|fn])位置$("").offset([coordinates])$("").position()$("").scrollTop([val])$("").scrollLeft([val])尺寸$("").height([val|fn])$("").width([val|fn])$("").innerHeight()$("").innerWidth()$("").outerHeight([soptions])$("").outerWidth([options])

实例返回顶部

Title - 锐客网body{margin: 0px; }.returnTop{height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; }.div1{background-color: orchid; font-size: 5px; overflow: auto; width: 500px; }.div2{background-color: darkcyan; }.div3{background-color: aqua; }.div{height: 300px; }.hide{display: none; }hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
返回顶部

Title - 锐客网*{margin: 0; padding: 0; }.div1{height: 100px; width: 100px; background-color: red; }.div3{height: 120px; width: 120px; background-color: seagreen; }.div2{position: relative; }.div4{background-color: aquamarine; width: 150px; height: 150px; padding: 5px; margin: 6px; border: 4px solid green; }.div5{width: 50%; height: 200px; overflow: auto; }.div6{width: 100%; height: 1000px; }.div5{background-color: aquamarine; }.div6{background-color: chocolate; }.div7{width: 90px; height: 60px; position: fixed; right: 20px; bottom: 20px; background-color: yellow; text-align: center; /*文本横向居中*/line-height: 60px; /*文本行高*/}.hide{display: none; }hellohellohellohellohellohellohellohellohellohello返回顶部

实例扩展：
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); }

jQuery代码

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

【jquery结合css实现返回顶部功能】到此这篇关于jquery结合css实现返回顶部功能的文章就介绍到这了,更多相关jquery的css操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！