點擊按鈕，回到頁面頂部的5種寫法

阿新 • • 發佈：2018-10-23

flow pos set nim orm sta 常用畫的 pan

1.錨點方式：

1 <body style="height:2000px;">
2 <div id="topAnchor"></div>
3 <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a>
4 </body>

2.scrollTop:scrollTop屬性表示被隱藏在內容區域上方的像素數。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大於0，且表示元素上方不可見內容的像素寬度

由於scrollTop是可寫的，可以利用scrollTop來實現回到頂部的功能

1 
 <body style="height:2000px;">
2 <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
3 <script>
4 test.onclick = function(){
5 document.body.scrollTop = document.documentElement.scrollTop = 0;
6 }
7 </script>
8 </body>

3.scrollTo:scrollTo(x,y)方法滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的左上角,設置scrollTo(0,0)可以實現回到頂部的效果

1 <body style="height:2000px;">
2 <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
3 <script>
4 test.onclick = function(){
5 scrollTo(0,0);
6 }
7 </script>
8 </body>

4.scrollBy():scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量,只要把當前頁面的滾動長度作為參數，逆向滾動，則可以實現回到頂部的效果

1 <body style="height:2000px;">
2 <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
3 <script>
4 test.onclick = function(){
5 var top = document.body.scrollTop || document.documentElement.scrollTop
6 scrollBy(0,-top);
7 }
8 </script>
9 </body>

5.scrolltoView()Element.scrollIntoView方法滾動當前元素，進入瀏覽器的可見區域,該方法可以接受一個布爾值作為參數。如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。如果沒有提供該參數，默認為true,使用該方法的原理與使用錨點的原理類似，在頁面最上方設置目標元素，當頁面滾動時，目標元素被滾動到頁面區域以外，點擊回到頂部按鈕，使目標元素重新回到原來位置，則達到預期效果

1 <body style="height:2000px;">
2 <div id="target"></div>
3 <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
4 <script>
5 test.onclick = function(){
6 target.scrollIntoView();
7 }
8 </script>
9 </body>

增強下面對回到頂部的功能進行增強【1】顯示增強使用CSS畫圖，將“回到頂部”變成可視化的圖形(如果兼容IE8-瀏覽器，則用圖片代替) 使用CSS偽元素及偽類hover效果，當鼠標移動到該元素上時，顯示回到頂部的文字，移出時不顯示　　

<style>
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:‘回到頂部‘;
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div>
</body>

【2】動畫增強為回到頂部增加動畫效果，滾動條以一定的速度回滾到頂部動畫有兩種：一種是CSS動畫，需要有樣式變化配合transition；一種是javascript動畫，使用定時器來實現　　在上面的5種實現中，scrollTop、scrollTo()和scrollBy()方法可以增加動畫，且由於無樣式變化，只能增加javascript動畫定時器又有setInterval、setTimeout和requestAnimationFrame這三種可以使用，下面使用性能最好的定時器requestAnimationFrame來實現 [註意]IE9-瀏覽器不支持該方法，可以使用setTimeout來兼容 1、增加scrollTop的動畫效果使用定時器，將scrollTop的值每次減少50，直到減少到0，則動畫完畢

<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

2、增加scrollTo()動畫效果將scrollTo(x,y)中的y參數通過scrollTop值獲取，每次減少50，直到減少到0，則動畫完畢

<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

3、增加scrollBy()動畫效果將scrollBy(x,y)中的y參數設置為-50，直到scrollTop為0，則回滾停止

<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollBy(0,-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

實現由於scrollTop、scrollBy()和scrollTo()方法，都以scrollTop值是否減少為0作為動畫停止的參照，且三個動畫的原理和實現都基本相似，性能也相似。最終，以最常用的scrollTop屬性實現動畫增強效果當然，如果覺得50的速度不合適，可以根據實際情況進行調整

<style>
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:‘回到頂部‘;
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
</style>
<body style="height:2000px;">
<div id="box" class="box">
<div class="box-in"></div>
</div>
</body>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>

點擊按鈕，回到頁面頂部的5種寫法

flow pos set nim orm sta 常用畫的 pan 1.錨點方式： 1 <body style="height:2000px;"> 2 <div id="topAnchor"></div> 3 <a href="

點擊按鈕，回到頁面頂部的5種寫法

點擊按鈕，回到頁面頂部的5種寫法

H5點擊按鈕，實現瀏覽器全屏模式代碼

點擊按鈕，實現兩個td值互換

原聲js，取消事件冒泡，點擊按鈕，顯示box,點擊屏幕其他地方，box隱藏

JS實現點擊按鈕，下載文件

jquery實現點選按鈕返回到頁面頂部效果

js-點擊按鈕頁面滾動到頂部，底部，指定位置

Java調用存儲過程，隨著按鈕點擊增多，調用存儲過程也增多，會出現超時問題

【HTML5】頁面點擊按鈕添加一行刪除一行全選反選全不選

當點擊“上一張”和“下一張”按鈕時，圖片框裏的圖片按順序更換下一張，點一次更換一次。還求一個代碼，當點擊按鈕或圖片時隨機更換成其它圖片。

點擊按鈕變色，松開按鈕恢復原來的顏色

vue點擊tab跳轉頁面，給點擊的tab添加樣式，且解決刷新以後點擊的tab樣式消失問題

小程序-點擊按鈕回到頂部1

html js點擊按鈕滾動跳轉定位到頁面指定位置（DIV）的方法代碼

JavaScript兩種創建標簽的的方法，實現點擊按鈕讓text自增

web端 - 返回上一步，點擊返回，跳轉上個頁面 JS

h5頁面點選按鈕，觸發手機自帶的發簡訊

asp.net 實現開啟檔案所在的資料夾，本地可以開啟，釋出後點擊按鈕沒有反應的解決辦法

JavaScript基礎下拉列表點擊按鈕顯示當前選項的索引值

js在父元素上添加點擊事件，怎麽阻止子元素繼承父元素的點擊事件？

點擊按鈕，回到頁面頂部的5種寫法

相關推薦