js滾動條回到頂部的代碼
更新時間：2011年12月06日 22:19:13 作者：
js滾動條回到頂部的代碼，里面的js代碼比較簡單，很適合學習。
雖然平滑性處理的不好，但非常適合學習
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
//怎么獲取網(wǎng)頁的高度 讓頁面一出來就滾動條在最底端
function myScroll()
{
//前邊是獲取chrome等一般瀏覽器 如果獲取不到就是ie了 就用ie的辦法獲取
var x=document.body.scrollTop||document.documentElement.scrollTop;
var timer=setInterval(function(){
x=x-100;
if(x<100)
{
x=0;
window.scrollTo(x,x);
clearInterval(timer);
}
window.scrollTo(x,x);
},"250");
}
</script>
<title></title>
</head>
<body id="bd">
<div>
<div style="height:1000px;">初始化</div>
<div style="height:1000px">
<div
style="position:fixed;right:10px;bottom:50px;width:20px;height:70px;background-color:red;cursor:hand;"
onclick="myScroll()">返回頂端</div>
</div>
</body>
</html>
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
//怎么獲取網(wǎng)頁的高度 讓頁面一出來就滾動條在最底端
function myScroll()
{
//前邊是獲取chrome等一般瀏覽器 如果獲取不到就是ie了 就用ie的辦法獲取
var x=document.body.scrollTop||document.documentElement.scrollTop;
var timer=setInterval(function(){
x=x-100;
if(x<100)
{
x=0;
window.scrollTo(x,x);
clearInterval(timer);
}
window.scrollTo(x,x);
},"250");
}
</script>
<title></title>
</head>
<body id="bd">
<div>
<div style="height:1000px;">初始化</div>
<div style="height:1000px">
<div
style="position:fixed;right:10px;bottom:50px;width:20px;height:70px;background-color:red;cursor:hand;"
onclick="myScroll()">返回頂端</div>
</div>
</body>
</html>
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)跳一跳小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
下面小編就為大家?guī)硪黄猨avascript漢字拼音互轉(zhuǎn)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript實現(xiàn)動態(tài)增加刪除表格行(兼容IE/FF)
javascript實現(xiàn)動態(tài)增加刪除表格行(兼容IE/FF)...2007-04-04
這篇文章主要介紹了JavaScript實現(xiàn)圖片合成下載的示例，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了原生js+cookie實現(xiàn)購物車功能的方法,結(jié)合實例形式分析了javascript結(jié)合cookie存儲實現(xiàn)購物車功能的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax實現(xiàn)無刷新
這篇文章主要介紹了js動態(tài)創(chuàng)建上傳表單通過iframe模擬Ajax無刷新的具體實現(xiàn),需要的朋友可以參考下2014-02-02
這篇文章主要為大家介紹了uni-app實現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
BootStrap智能表單實戰(zhàn)系列(七)驗證的支持
這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(七)驗證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面，都涉及到一個數(shù)據(jù)是否符合要求的檢查，需要客服端和服務器端的校驗的問題，本文介紹非常詳細，具有參考價值，需要的朋友可以參考下2016-06-06
Javascript在IE和Firefox瀏覽器常見兼容性問題總結(jié)
這篇文章主要介紹了Javascript在IE和Firefox瀏覽器常見兼容性問題,結(jié)合實例形式總結(jié)分析了javascript在IE與Firefox瀏覽器中常見的各種兼容性問題與相應的解決方法,需要的朋友可以參考下2016-08-08
toString方法的作用是不用多說的了，這個JavaScript內(nèi)置方法還有一個特性是：在執(zhí)行一些特殊方法的時候，比如alert或innerHTML等方法，它將由腳本解析器自動調(diào)用。2010-02-02