頁面加載完畢后滾動條自動滾動一定位置
更新時間:2014年02月20日 10:50:15 作者:
希望頁面加載完畢后向左自動滾動一定位置,下面有個不錯的方法可以輕松幫大家實(shí)現(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:;">點(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>
一直以為只要給頁面的 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:;">點(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>
您可能感興趣的文章:
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- asp.net網(wǎng)站開發(fā)中用jquery實(shí)現(xiàn)滾動瀏覽器滾動條加載數(shù)據(jù)(類似于騰訊微博)
- 拉動滾動條加載數(shù)據(jù)的jquery代碼
- flex的tree動態(tài)加載大量數(shù)據(jù)與滾動條相關(guān)問題探討
- 無刷新動態(tài)加載數(shù)據(jù) 滾動條加載適合評論等頁面
- 當(dāng)滾動條滾動到頁面底部自動加載增加內(nèi)容的js代碼
- 基于javascript實(shí)現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
相關(guān)文章
JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
這篇文章主要介紹了驗(yàn)證碼功能的三種實(shí)現(xiàn)方式,分為數(shù)字短信驗(yàn)證碼,圖形驗(yàn)證碼,滑動驗(yàn)證碼,本文通過示例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝,這篇介紹下怎么使用Gruntjs來搭建一個前端項(xiàng)目,然后使用grunt合并,壓縮JS文件。2014-06-06在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
Bootstrap中輪播圖插件叫作Carousel ,下面通過本文給大家詳細(xì)介紹了bootstrop中實(shí)現(xiàn)輪播圖效果,需要的朋友參考下2017-06-06javascript中通過arguments參數(shù)偽裝方法重載
面向?qū)ο蟮母呒壵Z言中,都有方法的重載,在js中可以通過arguments這個參數(shù)來偽裝成函數(shù)重載,具體如下2014-10-10JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05myFocus slide3D v1.1.0 使用方法與下載
myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。2011-01-01JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳:性能差異較大的機(jī)器運(yùn)行結(jié)果會RT 出現(xiàn)大的差異,為了保險起見。還是推薦使用Array 來進(jìn)行字符串拼接操作2012-05-05JS實(shí)現(xiàn)獲取圖片大小和預(yù)覽的方法完整實(shí)例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實(shí)現(xiàn)獲取圖片大小和預(yù)覽的方法,結(jié)合完整實(shí)例形式分析了javascript針對不同瀏覽器處理圖片上傳與預(yù)覽等操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04