javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
寫法
【1】錨點(diǎn)
使用錨點(diǎn)鏈接是一種簡單的返回頂部的功能實(shí)現(xiàn)。該實(shí)現(xiàn)主要在頁面頂部放置一個(gè)指定名稱的錨點(diǎn)鏈接，然后在頁面下方放置一個(gè)返回到該錨點(diǎn)的鏈接，用戶點(diǎn)擊該鏈接即可返回到該錨點(diǎn)所在的頂部位置
[注意]關(guān)于錨點(diǎn)的詳細(xì)信息移步至此
| 1 2 3 4 | <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到頂部</a> </body> |
【2】scrollTop
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。元素未滾動(dòng)時(shí)，scrollTop的值為0，如果元素被垂直滾動(dòng)了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度
由于scrollTop是可寫的，可以利用scrollTop來實(shí)現(xiàn)回到頂部的功能
[注意]關(guān)于頁面的scrollTop的兼容問題詳細(xì)內(nèi)容移步至此
| 1 2 3 4 5 6 7 8 | <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button> <script> test.onclick = function(){ document.body.scrollTop = document.documentElement.scrollTop = 0; } </script> </body> |
【3】scrollTo()
scrollTo(x,y)方法滾動(dòng)當(dāng)前window中顯示的文檔，讓文檔中由坐標(biāo)x和y指定的點(diǎn)位于顯示區(qū)域的左上角
設(shè)置scrollTo(0,0)可以實(shí)現(xiàn)回到頂部的效果
| 1 2 3 4 5 6 7 8 | <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button> <script> test.onclick = function(){ scrollTo(0,0); } </script> </body> |
【4】scrollBy()
scrollBy(x,y)方法滾動(dòng)當(dāng)前window中顯示的文檔，x和y指定滾動(dòng)的相對量
只要把當(dāng)前頁面的滾動(dòng)長度作為參數(shù)，逆向滾動(dòng)，則可以實(shí)現(xiàn)回到頂部的效果
| 1 2 3 4 5 6 7 8 9 | <body style="height:2000px;"> <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button> <script> test.onclick = function(){ var top = document.body.scrollTop || document.documentElement.scrollTop scrollBy(0,-top); } </script> </body> |
【5】scrollIntoView()
Element.scrollIntoView方法滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見區(qū)域
該方法可以接受一個(gè)布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對齊（前提是當(dāng)前區(qū)域可滾動(dòng)）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對齊（前提是當(dāng)前區(qū)域可滾動(dòng)）。如果沒有提供該參數(shù)，默認(rèn)為true
使用該方法的原理與使用錨點(diǎn)的原理類似，在頁面最上方設(shè)置目標(biāo)元素，當(dāng)頁面滾動(dòng)時(shí)，目標(biāo)元素被滾動(dòng)到頁面區(qū)域以外，點(diǎn)擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果
| 1 2 3 4 5 6 7 8 9 | <body style="height:2000px;"> <div id="target"></div> <button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button> <script> test.onclick = function(){ target.scrollIntoView(); } </script> </body> |
增強(qiáng)
下面對回到頂部的功能進(jìn)行增強(qiáng)
【1】顯示增強(qiáng)
使用CSS畫圖，將“回到頂部”變成可視化的圖形(如果兼容IE8-瀏覽器，則用圖片代替)
使用CSS偽元素及偽類hover效果，當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí)，顯示回到頂部的文字，移出時(shí)不顯示
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <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】動(dòng)畫增強(qiáng)
為回到頂部增加動(dòng)畫效果，滾動(dòng)條以一定的速度回滾到頂部
動(dòng)畫有兩種：一種是CSS動(dòng)畫，需要有樣式變化配合transition；一種是javascript動(dòng)畫，使用定時(shí)器來實(shí)現(xiàn)
在上面的5種實(shí)現(xiàn)中，scrollTop、scrollTo()和scrollBy()方法可以增加動(dòng)畫，且由于無樣式變化，只能增加javascript動(dòng)畫
定時(shí)器又有setInterval、setTimeout和requestAnimationFrame這三種可以使用，下面使用性能最好的定時(shí)器requestAnimationFrame來實(shí)現(xiàn)
[注意]IE9-瀏覽器不支持該方法，可以使用setTimeout來兼容
1、增加scrollTop的動(dòng)畫效果
使用定時(shí)器，將scrollTop的值每次減少50，直到減少到0，則動(dòng)畫完畢
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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()動(dòng)畫效果
將scrollTo(x,y)中的y參數(shù)通過scrollTop值獲取，每次減少50，直到減少到0，則動(dòng)畫完畢
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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()動(dòng)畫效果
將scrollBy(x,y)中的y參數(shù)設(shè)置為-50，直到scrollTop為0，則回滾停止
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
實(shí)現(xiàn)
由于scrollTop、scrollBy()和scrollTo()方法，都以scrollTop值是否減少為0作為動(dòng)畫停止的參照，且三個(gè)動(dòng)畫的原理和實(shí)現(xiàn)都基本相似，性能也相似。最終，以最常用的scrollTop屬性實(shí)現(xiàn)動(dòng)畫增強(qiáng)效果
當(dāng)然，如果覺得50的速度不合適，可以根據(jù)實(shí)際情況進(jìn)行調(diào)整
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <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> |
以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)回到頁面頂部的五種寫法(從實(shí)現(xiàn)到增強(qiáng))的全部敘述，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的，在此也非常感謝大家對腳本之家網(wǎng)站的支持！
原文鏈接：http://www.cnblogs.com/xiaohuochai/archive/2016/09/03/5836179.html
轉(zhuǎn)載于:https://my.oschina.net/fcweb/blog/1579428
總結(jié)
以上是生活随笔為你收集整理的基于JS实现回到页面顶部的五种写法(从实现到增强)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用ITEXT操作PDF文件
- 下一篇： Zabbix3.2.6之通过JMX监控T