设置CSS
更新:margin-left的值过大,导致内容挡住了按钮.已更新.
[具体样式可以参考我的.]
下面是CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #returnTop { /* 默认样式 */ width:51px; height:51px; margin-top:220px; margin-left:20px;/*原来:margin-left:200px;更新:此值尽量小一些,否则在一些小的屏幕上无法完整显示按钮*/ position:absolute; position:fixed } .returnMout { /*移除后的样式*/ background:url(images/returntop.gif); position:0px 0px; position:absolute; position:fixed } .returnMover { /*移到元素上的样式*/ width:51px; height:51px; background:url(images/returntop.gif); position:absolute; position:fixed; background-position:-51px -51px } |
按钮图片
JS部分
使用jQuery(1.10.*)版本,不过可以把下面的JS代码直接放到你的网站本身的JS里面.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | $(window).scroll(function() { var bt = $('#returnTop'); bt.removeClass("returnMover"); bt.addClass("returnMout"); var st = $(window).scrollTop(); if (st > 50) { bt.show(); // bt.mouseover(function(e) { bt.removeClass("returnMout"); bt.addClass("returnMover"); }); bt.mouseout(function(e) { bt.removeClass("returnMover"); bt.addClass("returnMout"); }); bt.click( function() { window.scroll(0, 0); } ); } else { bt.hide(); } }); |
HTML元素
1 | <div id="returnTop"> </div> |
放在页面顶部，我放在底部没效果，不知道为什么.