關(guān)于跳轉(zhuǎn)到指定位置的一些記錄(頁面底部)

在做移動端一個頁面的時候,需要實現(xiàn)一個滾動到底部的功能,參照了之前寫過的滾動到頂部的功能改了下代碼,在此做下記錄:

!function(){

? ? var timer =null;

? ? var isBottom =true;//定義一個布爾值,用于判斷是否到達底部

? ? window.onscroll =function(){//滾動條滾動事件

? ? ? ? if(!isBottom){

? ? ? ? ? ? clearInterval(timer);

? ? ? ? }

? ? ? ? isBottom =false;

? ? }

? ? var bottom =0 ;?//設(shè)置一個初始值

? ? $('.index-image').on('click',function(){

? ? ? ? timer =setInterval(function(){

? ? ? ? ? ? var osTop =$(document).height()-$(window).height();

? ? ? ? ? ? //用于設(shè)置速度差,產(chǎn)生緩動的效果

? ? ? ? ? ? var speed =Math.floor(osTop /6);

? ? ? ? ? ? bottom =document.documentElement.scrollTop =document.body.scrollTop =bottom +speed;

? ? ? ? ? ? isBottom =true;//用于阻止?jié)L動事件清除定時器

? ? ? ? ? ? if(osTop ==bottom){//當(dāng)達到底部時,清除定時器,并清空初始值

? ? ? ? ? ? ? ? clearInterval(timer);

? ? ? ? ? ? ? ? bottom =0 ;

? ? ? ? ? ? }

? ? ? ? },40);

? ? });

}();

以上就是實現(xiàn)一個有一個移動過程的滾動效果。這是其中一種滾動的方法,相應(yīng)的滾動到頂部或者滾動到指定位置可以參照上面代碼進行修改。還有另外一種是通過錨點進行定位。

示例如下:

<a href="#demo1">跳轉(zhuǎn)到demo1那個div</a>

<a href="#demo2">跳轉(zhuǎn)到demo2那個div</a>

<div id="demo1">demo1</div>

<div id="demo2">demo2</div>

錨點定位就是在a標簽里,把它的href屬性里的內(nèi)容寫為你要轉(zhuǎn)到到的那個部分的id名稱。

以上是我在不同階段了解到的一些關(guān)于跳轉(zhuǎn)到指定位置的方法。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容