第一种： jquery+html：
目录结构：1. test.html; 2. test.css; 3. test.js ; 4. images
具体代码：
（一）test.html: 引用jquery.js ，以及上述css，js文件
（二）test.js:
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"><img src="images/totop.png" /></div>').appendTo($("body"))
.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(); });
})();
（三）test.css:
.backToTop {
display: none;
width: 40px;
line-height: 1.2;
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:
目录结构：1. test.html; 2. css/style.css; 3. js/test.js ; 4.images
具体代码：
（一）test.html :
<html>
<head>
<title>返回顶部</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<p>向下拖动滚动条（进入第二屏），右下角会出现“返回顶部”图标</p>
<img src="images/totop.png" id="toTop"/>
<script style="text/javascript" src="js/test.js"></script>
</body>
</html>
（二）test.js:
(function(){
var scrollEle = clientEle = document.documentElement,
toTopBtn = document.getElementById("toTop"),
compatMode = document.compatMode,
isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;
//不同渲染模式以及Chrome的预处理
if(compatMode === "BackCompat" || isChrome){
scrollEle = document.body;
}
if(compatMode === "BackCompat"){
clientEle = document.body;
}
//返回顶部按钮的点击响应（注册函数），时间间隔和高度缩减率可以调节
toTopBtn.onclick = function(){
var moveInterval = setInterval(moveScroll, 10);
function moveScroll(){
setScrollTop(getScrollTop() / 1.2);
if(getScrollTop() === 0){
clearInterval(moveInterval);
}
}
}
//滚动时判断是否显示返回顶部按钮（注册函数）
window.onscroll = function(){
var display = toTopBtn.style.display;
if(getScrollTop() > getClientHeight()){
if(display === "none" || display === ""){
toTopBtn.style.display = "block";
}
}else{
if(display === "block" || display === ""){
toTopBtn.style.display = "none";
}
}
}
//获取和设置scrollTop
function getScrollTop(){
return scrollEle.scrollTop;
}
function setScrollTop(value){
scrollEle.scrollTop = value;
}
//获取当前网页的展示高度（第一屏高度），此处Chrome正常
function getClientHeight(){
return clientEle.clientHeight;
}
})();
（三）style.css:
body{
height:4000px;
}
#toTop{
position:fixed;
right:30px;
bottom:40px;
cursor:pointer;
display:none;
}
扫一扫
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
