頁面加載完畢后滾動條自動滾動一定位置
更新時間:2014年02月20日 10:50:15 作者:
希望頁面加載完畢后向左自動滾動一定位置,下面有個不錯的方法可以輕松幫大家實現(xiàn)下
昨天有一需求,是希望頁面加載完畢后向左自動滾動一定位置。
一直以為只要給頁面的 document.documentElement.scrollLeft 設置一個數(shù)值就生效,結果失望了~
今天抽空一查,才發(fā)現(xiàn):
使用document.documentElement.scrollLeft 設置值,必須在人為事件觸發(fā)下才生效;
想要頁面加載完畢時自動滾動一定距離,則使用jquery的animate,如下面例子:
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自動滾動</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>
</head>
<body>
<!-- container start -->
<div class="container" style="height: 3000px; width: 3000px;">
<a class="btn" href="javascript:;">點擊</a>
</div>
<!-- container end -->
<script type="text/javascript">
/*window.onload = function(){
window.scroll(0,300);
$(".btn").on("click", function(){
document.documentElement.scrollLeft = "500";
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
var oLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
alert(oLeft);
});
}*/
$(function(){
$("html,body").animate({"scrollLeft": "300px"}, 1000);
});
</script>
</body>
</html>
一直以為只要給頁面的 document.documentElement.scrollLeft 設置一個數(shù)值就生效,結果失望了~
今天抽空一查,才發(fā)現(xiàn):
使用document.documentElement.scrollLeft 設置值,必須在人為事件觸發(fā)下才生效;
想要頁面加載完畢時自動滾動一定距離,則使用jquery的animate,如下面例子:
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
demo:
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自動滾動</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>
</head>
<body>
<!-- container start -->
<div class="container" style="height: 3000px; width: 3000px;">
<a class="btn" href="javascript:;">點擊</a>
</div>
<!-- container end -->
<script type="text/javascript">
/*window.onload = function(){
window.scroll(0,300);
$(".btn").on("click", function(){
document.documentElement.scrollLeft = "500";
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
var oLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
alert(oLeft);
});
}*/
$(function(){
$("html,body").animate({"scrollLeft": "300px"}, 1000);
});
</script>
</body>
</html>
相關文章
javascript中通過arguments參數(shù)偽裝方法重載
面向對象的高級語言中,都有方法的重載,在js中可以通過arguments這個參數(shù)來偽裝成函數(shù)重載,具體如下2014-10-10JS求1到任意數(shù)之間的所有質數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質數(shù),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05myFocus slide3D v1.1.0 使用方法與下載
myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。2011-01-01JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳:性能差異較大的機器運行結果會RT 出現(xiàn)大的差異,為了保險起見。還是推薦使用Array 來進行字符串拼接操作2012-05-05JS實現(xiàn)獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實現(xiàn)獲取圖片大小和預覽的方法,結合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預覽等操作的相關實現(xiàn)技巧,需要的朋友可以參考下2017-04-04