jquery与css实现返回顶部的效果代码__backToTopEle_function_backToTopTxt_backToTopFun_window_

当前位置: 编程技术>jquery

jquery与css实现返回顶部的效果代码

来源: 互联网发布时间：2014-09-03

本文导语: 很多网站的文章页中，都会有返回顶部的效果。本文为大家介绍下使用jquery来实现返回顶部效果的方法，有兴趣的朋友一起研究下。 1，css部分代码示例: .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; back...

很多网站的文章页中，都会有返回顶部的效果。
本文为大家介绍下使用jquery来实现返回顶部效果的方法，有兴趣的朋友一起研究下。

1，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); 

}

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