整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
現按鈕點擊快速回到頁面頂部，有多種方法。
在這里我介紹一下jQuery的方法。
jQuery核心代碼：
$(".top").click(function() {
$("body,html").animate({
scrollTop: 0
}
<script type="text/javascript">
var userAgent=navigator.userAgent.toLowerCase();
var browser=
(browser=userAgent.match(/qqbrowser\/([\d.]+)/))?"qqbrowser/"+browser[1]:
(browser=userAgent.match(/se\s+2.x/))?"sogou/2.x": //sougou
(browser=userAgent.match(/msie\s+([\d.]+)/))?"msie/"+browser[1]: //ie
(browser=userAgent.match(/chrome\/([\d.]+)/))?"chrome/"+browser[1]: //chrome
(browser=userAgent.match(/firefox\/([\d.]+)/))?"firefox/"+browser[1]: //firefox
(browser=userAgent.match(/version\/([\d.]+)\s+safari\/([\d.]+)/))?"safari/"+browser[1]: //safari
(browser=userAgent.match(/opera\/([\d.]+)([\w\W]+)version\/([\d.]+)/))?"opera/"+browser[3]: //opera
"other browser";
var browser4=browser.substr(0,2);
//實現回到頁面頂部
function goTopEx(){
var obj=document.getElementById("goTopBtn");
var obj2=document.getElementById("shangy");
var obj3=document.getElementById("xiay");
var obj4=document.getElementById("goBottom");
function getScrollTop(){
if(browser4=="ch"){
//谷歌瀏覽器
return document.body.scrollTop;
}else{
//IE、firefox等瀏覽器
return document.documentElement.scrollTop;
}
}
function setScrollTop(value){
if(browser4=="ch"){
//谷歌瀏覽器
document.body.scrollTop=value;
}else{
//IE、firefox等瀏覽器
document.documentElement.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>50?obj.style.display="":obj.style.display="none";
getScrollTop()>100?obj2.style.display="":obj2.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj3.style.display="":obj3.style.display="none";
document.body.clientHeight-getScrollTop()>650?obj4.style.display="":obj4.style.display="none";
}
obj.onclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}
function downn(){
if(browser4=="ch"){
//谷歌瀏覽器
window.scrollBy(0,document.body.clientHeight);
}else{
//IE、firefox等瀏覽器
window.scrollBy(0,document.documentElement.clientHeight);
}
}
</script>
<style type="text/css">
#tbrowser a:link，.container a:visited{
font-size:18px;
text-decoration:none;
}
.container{
font-size:1.2em;
margin:auto;
font-family:"宋體";
width:75.29%;
line-height:1.6em;
}
P{
margin-top:16px;
margin-bottom:16px;
text-indent:2em;
}
.uls{
color:#CC6666;
font-weight:bold;
}
.uls>ol{
list-style:none;
font-weight:normal;
list-style:lower-latin;
color:#000000;
line-height:1.3em;
}
h2{
font-size:20px;
font-weight:bold;
margin-top:15px;
margin-bottom:0px;
text-indent:0em;
}
#goTopBtn, #goBottom, #shangy, #xiay{
width: 18px;
line-height: 1.2;
padding: 5px 0;
font-size: 12px;
text-align: center;
position: fixed;
right: 10px;
cursor: pointer;
filter: Alpha(opacity=30);
opacity=.3;
}
#goTopBtn, #goBottom {
background-color:#aaa;
color:#000;
}
#shangy, #xiay{
background-color: #ccc;
color: #000;
}
#goTopBtn{
bottom: 105px;
}
#goBottom {
bottom: 30px;
}
#shangy {
bottom: 80px;
}
#xiay {
bottom: 55px;
}
#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover{
background-color:#ddd;
border:#ccc 0px solid;
}
#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link {
text-decoration: none;
color:white;
}
img{
margin-right:2em;
text-indent:2em;
border:0;
}
.picsay{
color:#930;
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.remark{
color:#930;
font-size:90%;
line-height:140%;
margin-top:-12px;
text-indent:0em;
padding:0;
}
.ref{
color:#930;
font-size:95%;
line-height:150%;
margin-top:-12px;
text-indent:2em;
padding:0;
}
.code0, .code2, .code4{
font-size:90%;
line-height:110%;
margin-top:-12px;
padding:0;
}
.code0{
color:red;
text-indent:0em;
}
.code2{
color:#930;
text-indent:2em;
}
.code4{
color:blue;
text-indent:4em;
}
sub,sup{
font-size:80%;
color:red;
}
</style>
<body>
……
<div style="display:none" id="goTopBtn">
<a href="javascript：void(null)" target="_self">∧</div>
<div style="display:none" id="shangy">
<a href="javascript：void(null)" onclick="shangy()" target="_self">↑</a></div>
<div id="xiay">
<a href="javascript：void(null)" onclick="xiay()" target="_self">↓</a></div>
<div id="goBottom">
<a href="javascript：void(null)" onclick="downn()" target="_self">∨</a></div>
<SCRIPT type=text/javascript>
goTopEx();
function xiay(){
window.scrollBy(0,window.innerHeight);
}
function shangy(){
window.scrollBy(0,-window.innerHeight);
}
</script>
</body>
</body>
關鍵在于控制以下一些對象及屬性：
inner:測量的是一個窗口的活動文檔區（以稱為內容區）的高和寬；
outer:測量的是整個窗口的外邊界；包括任何顯示在窗口中的東西：滾動條、狀態欄等；
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
－End－
Query點擊返回頂部的功能在網頁中很常見。當網站內容過多的時候,添加一個返回頂部的功能,可以更好的增加用戶體驗。用jQuery寫了這樣一個效果。
返回頂部按鈕的一些css樣式，如下：
.last{
position: fixed;
width: 50px;
height: 50px;
right: 200px;
bottom: 55px;
cursor: pointer;
text-align: center;
line-height: 50px;
background-color: #00b7ee;
opacity: 0.8;
color: #fff;
}
.last:hover{
background-color: #1fb5ad;
color: #fff;
}
首先需要在html頁面添加如下元素：
<!--返回頂部 start-->
<div class="last">
<span> 頂部 </span>
</div>
<!--返回頂部 end-->
jquery代碼
有了html和樣式，我們還需要用jquery來控制返回頂部按鈕，在頁面滾動時淡入淡出返回頂部按鈕。
<script>
$(document).ready(function() {
//首先將.last 隱藏
$(".last").hide();
//當滾動條的位置處于距頂部150像素以下時，返回頂部按鈕顯示，否則隱藏
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 150) {
$(".last").fadeIn(1500);
} else {
$(".last").fadeOut(1500);
}
});
// 點擊返回頂部
$('.last').on('click',function(){
$('html,body').animate({
scrollTop:0
},500);
return false;
});
});
});
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
