頁面加載完畢后滾動條自動滾動一定位置
更新時間：2014年02月20日 10:50:15 作者：
希望頁面加載完畢后向左自動滾動一定位置，下面有個不錯的方法可以輕松幫大家實現(xiàn)下
昨天有一需求，是希望頁面加載完畢后向左自動滾動一定位置。
一直以為只要給頁面的 document.documentElement.scrollLeft 設(shè)置一個數(shù)值就生效，結(jié)果失望了~
今天抽空一查，才發(fā)現(xiàn)：
使用document.documentElement.scrollLeft 設(shè)置值，必須在人為事件觸發(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è)置一個數(shù)值就生效，結(jié)果失望了~
今天抽空一查，才發(fā)現(xiàn)：
使用document.documentElement.scrollLeft 設(shè)置值，必須在人為事件觸發(fā)下才生效；
想要頁面加載完畢時自動滾動一定距離，則使用jquery的animate，如下面例子：
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
demo:
復(fù)制代碼 代碼如下:
<!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>
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JavaScript遍歷對象的七種方法匯總，文章通過從屬性可枚舉性問題與遍歷方法兩個大方面講述全文，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
JavaScript中html畫布的使用與頁面存儲技術(shù)詳解
這篇文章主要介紹了JavaScript中html畫布的使用與頁面存儲技術(shù),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回(實現(xiàn)思路)
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動彈回，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
JS隱藏參數(shù)post傳值實例，需要的朋友可以參考一下2013-04-04
這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡單實現(xiàn)的相關(guān)資料,ECharts是百度前端開發(fā)部開發(fā)的一個開源可視化庫,它可以幫助開發(fā)者輕松的實現(xiàn)各種數(shù)據(jù)可視化,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
js 異步處理進度條的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JavaScript DOM常用操作代碼匯總,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了javascript原型模式用法,以實例形式較為詳細(xì)的分析了javascript原型模式的原理與使用技巧,需要的朋友可以參考下2015-06-06
gulpjs是一個前端構(gòu)建工具,gulpjs使用的是nodejs中stream來讀取和操作數(shù)據(jù)，其速度更快,有興趣的可以了解一下。2017-01-01