原生JS 回到頂部 tab欄的切換

2022-09-18 07:42:24 字數 1369 閱讀 6887

回到頂部:html裡改變的頭部還有 回到頂部按鈕

js**:

function my$(id) 

// 獲取頁面滾動距離的瀏覽器相容性問題

// 獲取頁面滾動出去的距離

function getscroll()

}// 獲取元素

// 注意:不能用top。top 是window自帶的乙個屬性,此屬性是唯讀的。此屬性預設是window物件

var bodytop = my$('top');

// 回到頂部的按鈕

var totop = my$('totop');

// 當拖動滾動條的時候執行

window.onscroll = function () else

}//2 當點選回到頂部按鈕的時候,動畫的方式,回到最上面,讓滾動距離為0

var timerid = null;

totop.onclick = function ()

timerid = setinterval(function ()

// documentelement 網頁中的根元素 html

// 判斷當前是否到達目標位置

if (math.abs(current - target) <= math.abs(step))

current += step;

document.body.scrolltop = current;

document.documentelement.scrolltop = current;

}, 5);

}

tab欄的切換:

**

公告更多

// 獲取元素,整體的tab欄

var newst = document.getelementbyid('newst');

// 紅色的線

var flag = document.getelementbyid('flag');

// 詳細內容的容器

var newscontainer = document.getelementbyid('newscontainer');

//1 獲取到a標籤,註冊事件

for (var i = 0; i < 2; i++)

function linkmouseover()

} // 當前對應的詳細內容顯示

var index = parseint(this.getattribute('index'));

newscontainer.children[index].classname = 'news-b show';

}

JS 回到頂部

對於內容超出螢幕很多的內容,有個回到頂部的按鈕還是很人性化的 html header header div div span id go 回到頂部 span jsvar gotop document.getelementbyid go window.onscroll function else go...

JS 實現回到頂部

js 實現點選回到頂部 樣式 body 產生滾動條 go 2 top 模擬點選div的時候回到頂部 最初隱藏,滾動一定距離顯示 結構 js var backtop document.getelementbyid back top 獲取到div 物件 onscroll 事件 在元素滾動條在滾動時觸發。...

JS 回到頂部按鈕的實現

很多頁面都有乙個回到頂部的按鈕,一旦點選頁面的scrollbar就會變為0 只需要document.body.scrolltop document.documentelement.scrolltop 0,在這個基礎上在加乙個緩動公式。下面貼上我的 html 1 div class content 2...