页面加载完毕后滚动条自动滚动一定位置
昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置。
一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~
今天抽空一查,才发现:
使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效;
想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子:
$("html,body").animate({"scrollLeft": "300px"}, 1000);
$("html,body").animate({"scrollTop": "300px"}, 1000);
<!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>
相关推荐
-
asp.net+jquery滚动滚动条加载数据的下拉控件
这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下
-
当滚动条滚动到页面底部自动加载增加内容的js代码
1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s
-
拉动滚动条加载数据的jquery代码
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>拉动滚动条加载数据</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> &l
-
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地
-
flex的tree动态加载大量数据与滚动条相关问题探讨
用arraycollection做数据源的坑啊,网上几乎没啥例子,全靠自己摸索 其实显示上万条数据用滚动条本来就是个垃圾设计,没办法,lvl太低,做不了主. case 1: 官方有句话:使用ItemRenderer的大数据控件,其在渲染时,并不会一次创建所有数据列/行的显示对象 (ItemRenderer),它仅会创建在屏幕上可见的数据列/行,并且重复利用这些显示对象,以提交运行时效率. 所以拖动滚动条时候很容易出现花屏 或者 空白. 原因是Tree中的也是用的itemRender产生延迟造成的
-
基于javascript实现浏览器滚动条快到底部时自动加载数据
废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /
-
无刷新动态加载数据 滚动条加载适合评论等页面
滚屏加载更多数据,适合评论等页面 本例的数据库很简单,一看就明了 复制代码 代码如下: <div id="container"> <?php $query=mysql_query("select * from content order by id desc limit 0,10"); while ($row=mysql_fetch_array($query)) { ?> <div class="single_item&q
-
页面加载完毕后滚动条自动滚动一定位置
昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效: 想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子: $("html,body").animate({"scrollLeft
-
Vue页面加载完成后如何自动加载自定义函数
目录 页面加载完成后自动加载自定义函数 created mounted vue之自执行函数 页面加载完成后自动加载自定义函数 created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. methods: { indexs:function(){ this.$http.post('{:url("Index/fun")}') .then(function(res){
-
jquery实现在页面加载完毕后获取图片高度或宽度
日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:
-
两种方法实现在HTML页面加载完毕后运行某个js
js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery文件. 复制代码 代码如下: <script type="text/javascript"> $(documen
-
在css加载完毕后自动判断页面是否加入css或js文件
最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js
-
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(functi
-
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
本文实例讲述了jQuery实现在HTML文档加载完毕后自动执行某个事件的方法.分享给大家供大家参考,具体如下: 原来onchange="fucntionname(parms)": <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border
-
判断在css加载完毕后执行后续代码示例
最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js
-
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =
-
在页面加载完成后通过jquery给多个span赋值
由于我想在页面加载完成后,有几个地方显示当前时间,所以我需要给多个span赋值. span代码的写法如下: 复制代码 代码如下: <span name="currentDate"></span> (多个span) jQuery写法: 复制代码 代码如下: <script> $(document).ready(function() { var currentDate = new Date().toLocaleDateString(); $("
随机推荐
- 利用docker搭建web服务环境的方法步骤
- 浅谈setTimeout 与 setInterval
- spring对JDBC和orm的支持实例详解
- Bootstrap Table使用整理(一)
- js中字符替换函数String.replace()使用技巧
- SpringMVC和Swagger整合方法
- 深入剖析Java中的各种异常处理方式
- jQuery 开天辟地入门篇一
- javascript显示隐藏层比较不错的方法分析
- asp.net String.IsNullOrEmpty 方法
- ASP.NET 页面刷新的实现方法(包括html,js)
- codeigniter中view通过循环显示数组数据的方法
- python中星号变量的几种特殊用法
- Android动画之雷达扫描效果
- linux网络相关命令汇总(6)
- 2017最新版windows安装mysql教程
- js手机号批量滚动抽奖实现代码
- 解决JS中乘法的浮点错误的方法
- 浅谈java泛型的作用及其基本概念
- rsync只同步指定目录的方法(已测)