JS返回頂部實例代碼
更新時間：2020年08月09日 10:48:59 作者：數(shù)星星的咚咚咚
這篇文章主要為大家詳細介紹了JS返回頂部實例代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS返回頂部實例代碼，供大家參考，具體內(nèi)容如下
html/css部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="返回頂部效果.js"></script>
<style>
.container{
width:1190px;
margin: 0px auto;
}
.container a{
display: none;
width:40px;
height:40px;
background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
position: fixed;
left:95%;
bottom: 50px;
}
.container a:hover{
background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
background-position: left -40px;
}
</style>
</head>
<body>
<div class="container">
<img src="/535e0ce800015b7511902787.jpg" alt="">
<a id="btn" href="javascript:" class="btn" title="回到頂部"></a>
</div>
</body>
</html>
JS部分
window.onload=function(){
var obtn=document.getElementById("btn");
var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
var isTop=true;
var timer=null;
window.onscroll=function(){
var topH=document.documentElement.scrollTop||document.body.scrollTop;
if(topH>clientHeight){
obtn.style.display="block";
}else{
obtn.style.display="none";
}
}
obtn.onclick=function(){
timer=setInterval(function(){
var topH=document.documentElement.scrollTop||document.body.scrollTop;
var stepLength=Math.ceil(topH/5);
document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
if(topH==0){
clearInterval(timer);
}
},30);
}
}
學(xué)習(xí)視頻地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
手寫的一個兼容各種瀏覽器的javascript getStyle函數(shù)(獲取元素的樣式)
這篇文章主要介紹了手寫的一個兼容各種瀏覽器的javascript getStyle函數(shù),用來取元素的樣式,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼
這篇文章主要介紹了JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JS實現(xiàn)的左側(cè)豎向滑動菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)點擊事件操作頁面元素樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JS組件Form表單驗證神器BootstrapValidator
做Web開發(fā)的我們，表單驗證是再常見不過的需求了。友好的錯誤提示能增加用戶體驗。今天就來看看bootstrapvalidator如何使用，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了ES6擴展運算符用法,結(jié)合實例形式分析了ES6擴展運算符的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-10-10
JS中利用FileReader實現(xiàn)上傳圖片前本地預(yù)覽功能
FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家介紹JS中利用FileReader實現(xiàn)上傳圖片前本地預(yù)覽功能，需要的朋友參考下2018-03-03
微信小程序?qū)W習(xí)總結(jié)（三）條件、模板、文件引用實例分析
這篇文章主要介紹了微信小程序條件、模板、文件引用,結(jié)合實例形式分析了微信小程序if條件判斷、模板調(diào)用、wxss文件引用等相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
在日常?APP?開發(fā)過程中,經(jīng)常要用到數(shù)據(jù)的存儲、獲取和刪除等操作以及頁面導(dǎo)航之間的跳轉(zhuǎn),為此,封裝了一個兩個簡單的方法來統(tǒng)一調(diào)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-09-09
作為前端程序員,TS已經(jīng)成為一項必不可少的技能,本文旨在介紹 TS中的一些實用技巧,提高大家對這門語言更深的認知,這篇文章主要給大家介紹了關(guān)于typescript實用小技巧的相關(guān)資料,需要的朋友可以參考下2021-08-08