两种 "返回顶部"demo

谁借莪１个温暖的怀抱￠ 2022-01-11 03:57 272阅读 0赞

## **第一种： 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;  
\}**