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


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 相关文章推荐
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python continue语句用法实例
2014/03/11 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python socket实现简单聊天室
2018/04/01 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python扫描线填充算法详解
2020/02/19 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
微型企业创业投资计划书
2014/01/10 职场文书
审计主管岗位职责
2014/01/31 职场文书
《假如》教学反思
2014/04/17 职场文书
个人考核材料
2014/05/15 职场文书
服务口号大全
2014/06/11 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL