页面加载完毕后滚动条自动滚动一定位置

文章转摘于:http://www.jb51.net/article/47051.htm

昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置。


一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~
今天抽空一查,才发现:
使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效;
想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子:

$("html,body").animate({"scrollLeft": "300px"}, 1000);

$("html,body").animate({"scrollTop": "300px"}, 1000);


<!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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值