js瀏覽器滾動(dòng)條卷去的高度scrolltop(實(shí)例講解)
1、之前我們學(xué)習(xí)的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是“只讀”的屬性-> 只能通過(guò)屬性獲取值,不能通過(guò)屬性修改元素的樣式
2、scrollTop/scrollLeft:滾動(dòng)條卷去的高度/寬度(這兩個(gè)屬性是唯一“可讀寫(xiě)”的屬性)
box.scrollTop = 0 // 直接回到容器的頂部
我們的scrollTop的值是存在邊界值(最大和最小值),我們?cè)O(shè)置的值比最小值小或者比最大值大都沒(méi)用,起到效果的依然是邊界的值
[最小值是零]
box.scrollTop = -1000;// 直接回到了容器的頂部,沒(méi)有超出
console.log(box.scrollTop) //0
[最大值 = 真實(shí)的高度-當(dāng)前容器一屏幕的高度]
var maxTop = box.scrollHeight - box.clientHeight;
scrollTop最經(jīng)典的應(yīng)用就是回到頂部,下面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } html,body{ width:100%; height:1000%; background:#11c900; } a{ text-decoration: none; color:#000; } </style> </head> <body> <a href="javascript:" rel="external nofollow" id="goLink">GO</a> //A標(biāo)簽本身是跳轉(zhuǎn)頁(yè)面的,把跳轉(zhuǎn)的地址寫(xiě)在href這個(gè)屬性中 /* 1)、不寫(xiě)值的話是刷新本頁(yè)面 2)、寫(xiě)的如果是#target,是錨點(diǎn)定位,定位到當(dāng)前頁(yè)面Id為target這個(gè)位置 3)、“javascript:”這樣寫(xiě)是取消A標(biāo)簽?zāi)J(rèn)跳轉(zhuǎn)的行為 */ <script> var goLink =document.getElementById("goLink"); /* 回到頂部: 總時(shí)間(duration):500ms 頻率(interval):多長(zhǎng)時(shí)間走一步 10ms 總距離(target): 當(dāng)前的位置(當(dāng)前的scrollTop)- 目標(biāo)的位置(0) 步長(zhǎng)(step):每一次走得距離 (target/duration)*interval */ /* 這個(gè)代碼是可以優(yōu)化的: 開(kāi)始GO按鈕是不顯示的,當(dāng)滾動(dòng)到一定的距離之后,才顯示,反之隱藏 只要瀏覽器的滾動(dòng)條在滾動(dòng),我們就需要判斷GO顯示還是隱藏 瀏覽器的滾動(dòng)條滾動(dòng):拖動(dòng)滾動(dòng)條、鼠標(biāo)滾輪、鍵盤(pán)上下鍵、pageDown/pageUp鍵、點(diǎn)擊滾動(dòng)條的空白區(qū)域或者箭頭(自主操作的行為)...我們還可以通過(guò)js控制scrollTop的值來(lái)實(shí)現(xiàn)滾動(dòng)條的滾動(dòng) */ window.onscroll = function computedDisplay(){//不管怎么操作的,只要滾動(dòng)條動(dòng)了就會(huì)觸發(fā)這個(gè)行為 var curTop = document.documentElement.scrollTop || document.body.scrollTop; var curHeight = document.documentElement.clientHeight || document.body.clientHeight; if(curTop>=clientHeight){ goLink.style.display = "block" }else{ goLink.style.display = "none" } } goLink.onclick = function(){ this.style.display = "none";//并不會(huì)消失,因?yàn)槲覀儩L動(dòng)條往回走的時(shí)候 又會(huì)觸發(fā)onscroll事件,又會(huì)進(jìn)行顯示 window.onscroll = null; var duration = 500,interval=10,target=document.documentElement.scrollTop || document.body.scrollTop; var step = (target/duration)*interval; var timer = window.setInterval(function(){ var curTop = document.documentElement.scrollTop || document.body.scrollTop; if(curTop===0){ window.clearInterval(timer); window.onscroll = computedDisplay; //當(dāng)動(dòng)畫(huà)結(jié)束后把對(duì)應(yīng)的方法重新綁定給window.onscroll return; } curTop-=step document.documentElement.scrollTop = curTop; document.body.scrollTop = curTop; },interval) // document.documentElement.scrollTop = 0; // document.body.scrollTop = 0; } </script> </body> </html>
以上這篇js瀏覽器滾動(dòng)條卷去的高度scrolltop(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript FAQ函數(shù)(提問(wèn)+回復(fù))
javascript FAQ函數(shù),當(dāng)點(diǎn)擊問(wèn)題時(shí)顯示下面的回復(fù)內(nèi)容。2009-07-07JavaScript30 一個(gè)月純 JS 挑戰(zhàn)中文指南(英文全集)
JavaScirpt30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫(xiě)東西,不借助框架和庫(kù),也不使用編譯器和引用2017-07-07用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果
用JS實(shí)現(xiàn)HTML標(biāo)簽替換效果...2007-06-06JavaScript 提升運(yùn)行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說(shuō)法,有四種代碼 會(huì)拖慢腳本的運(yùn)行,并最終導(dǎo)致腳本失控。分別是次數(shù)過(guò)多的同步循環(huán)、龐大的函數(shù)體、不恰當(dāng)?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12微信小程序canvas開(kāi)發(fā)水果老虎機(jī)的思路詳解
這篇文章主要介紹了微信小程序canvas開(kāi)發(fā)水果老虎機(jī)的思路,本文通過(guò)思路代碼分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02layui實(shí)現(xiàn)數(shù)據(jù)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)分頁(yè)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07