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


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高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
JS图片预加载三种实现方法解析
May 08 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
JS简易计算器实例讲解
Jun 30 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
python的launcher用法知识点总结
2020/08/07 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
报告会主持词
2014/04/02 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
自我检讨报告
2015/01/28 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python