快捷導(dǎo)航

頁面加載完畢后滾動(dòng)條自動(dòng)滾動(dòng)一定位置

更新時(shí)間：2014年02月20日 10:50:15 作者：

希望頁面加載完畢后向左自動(dòng)滾動(dòng)一定位置，下面有個(gè)不錯(cuò)的方法可以輕松幫大家實(shí)現(xiàn)下

昨天有一需求，是希望頁面加載完畢后向左自動(dòng)滾動(dòng)一定位置。

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