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和一张向上箭头图片up.png
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../javascript/jquery-1.6.js"></script> <style type="text/css"> body { height:1200px; } #testIE6 { _height:1200px; _width:200px; } .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; height:48px !important; _width: 58px; _height: 58px; position: fixed; _position: absolute; /*for IE6*/ opacity: .6; filter: Alpha(opacity=60); /*for IE*/ padding:5px; cursor: pointer; display: none; border-radius:5px; -webkit-transition-property: background-color, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; -moz-transition-property: background-color; -moz-transition-duration: 1s; -moz-transition-timing-function: ease; } .scroll-up:hover { background-color:#B9B9B9; opacity: .8; } </style> </head> <body> <div id="testIE6"></div> <script type="text/javascript"> ;(function($) { $.scrollBtn = function(options) { var opts = $.extend({}, $.scrollBtn.defaults, options); var $scrollBtn = $('<div></div>').css({ bottom: opts.bottom + 'px', right: opts.right + 'px' }).addClass('scroll-up') .attr('title', opts.title) .click(function() { $('html, body').animate({scrollTop: 0}, opts.duration); }).appendTo('body'); $(window).bind('scroll', function() { var scrollTop = $(document).scrollTop(), viewHeight = $(window).height(); if(scrollTop <= opts.showScale) { if($scrollBtn.is(':visible')) $scrollBtn.fadeOut(500); } else { if($scrollBtn.is(':hidden')) $scrollBtn.fadeIn(500); } if(isIE6()) { var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; $scrollBtn.css('top', top + 'px'); } }); function isIE6() { if($.browser.msie) { if($.browser.version == '6.0') return true; } } }; /** * -params * -showScale: scroll down how much to show the scrollup button * -right: to right of scrollable container * -bottom: to bottom of scrollable container */ $.scrollBtn.defaults = { showScale: 100, right:10, bottom:10, duration:200, title:'back to top' } })(jQuery); $.scrollBtn({ showScale: 200, bottom:20, right:20 }); </script> </body> </html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦