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


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 相关文章推荐
document.compatMode介绍
May 21 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
Mac下安装vue
Apr 11 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
封装微信小程序http拦截器过程解析
Aug 13 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
python实现简单飞行棋
2020/02/06 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Python使用xpath实现图片爬取
2020/09/16 Python
大学教师年终总结的自我评价
2013/10/29 职场文书
考试诚信承诺书
2014/05/23 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
公司出差管理制度范本
2015/08/05 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers