js滾動(dòng)條回到頂部的代碼
更新時(shí)間:2011年12月06日 22:19:13 作者:
js滾動(dòng)條回到頂部的代碼,里面的js代碼比較簡單,很適合學(xué)習(xí)。
雖然平滑性處理的不好,但非常適合學(xué)習(xí)
<!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)頁的高度 讓頁面一出來就滾動(dò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>
復(fù)制代碼 代碼如下:
<!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)頁的高度 讓頁面一出來就滾動(dò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>
您可能感興趣的文章:
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 判斷滾動(dòng)條到底部的JS代碼
- JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁面底部并執(zhí)行事件的方法
- js操作滾動(dòng)條事件實(shí)例
- JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
- 當(dāng)滾動(dòng)條滾動(dòng)到頁面底部自動(dòng)加載增加內(nèi)容的js代碼
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到某個(gè)位置便自動(dòng)定位某個(gè)tr
- js判斷滾動(dòng)條是否已到頁面最底部或頂部實(shí)例
- JS和JQUERY獲取頁面大小,滾動(dòng)條位置,元素位置(示例代碼)
- 原生js實(shí)現(xiàn)自定義滾動(dòng)條組件
相關(guān)文章
基于JS實(shí)現(xiàn)table導(dǎo)出Excel并保留樣式
這篇文章主要介紹了基于JS實(shí)現(xiàn)table導(dǎo)出Excel并保留樣式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)窗口抖動(dòng)效果,需要的朋友可以參考下2016-01-01
JavaScript ECMA-262-3 深入解析.第三章.this
在這篇文章里,我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字2011-09-09
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼
查詢綁定數(shù)據(jù)島的表格中的文本并修改顯示方式的js代碼2009-12-12
javascript 彈出窗口中是否顯示地址欄的實(shí)現(xiàn)代碼
程序中通過點(diǎn)擊一個(gè)“發(fā)貨提醒”鏈接彈出另一個(gè)窗口,使用的方法是用javascript 的openUrl()方法。2011-04-04
js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05

