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


Posted in Javascript onFebruary 20, 2014

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

一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~
今天抽空一查,才发现:
使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效;
想要页面加载完毕时自动滚动一定距离,则使用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 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 #Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 #Javascript
js获取指定的cookie的具体实现
Feb 20 #Javascript
js获取和设置属性的方法
Feb 20 #Javascript
js控制浏览器全屏示例代码
Feb 20 #Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 #Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
python基础while循环及if判断的实例讲解
2017/08/25 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python多图片合并PDF的方法
2019/01/03 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
详解python itertools功能
2020/02/07 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
酒吧副总经理岗位职责
2013/12/10 职场文书
支教自我鉴定
2014/01/18 职场文书
会务接待方案
2014/02/27 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
工厂见习报告范文
2014/10/31 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
导游词之南京夫子庙
2019/12/09 职场文书