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


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 相关文章推荐
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP 代码规范小结
2012/03/08 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
Python与Java间Socket通信实例代码
2017/03/06 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python可视化实现代码
2019/01/15 Python
python调用支付宝支付接口流程
2019/08/15 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
市场营销调查计划书
2014/05/02 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015年招聘工作总结
2014/12/12 职场文书
2015年售票员工作总结
2015/04/29 职场文书
婚宴领导致辞
2015/07/28 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android