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

昨天有一需求，是希望页面加载完毕后向左自动滚动一定位置。

一直以为只要给页面的 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>

赞 (0)

相关推荐

  • 基于javascript实现浏览器滚动条快到底部时自动加载数据

    废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • flex的tree动态加载大量数据与滚动条相关问题探讨

    用arraycollection做数据源的坑啊,网上几乎没啥例子,全靠自己摸索 其实显示上万条数据用滚动条本来就是个垃圾设计,没办法,lvl太低,做不了主. case 1: 官方有句话:使用ItemRenderer的大数据控件,其在渲染时,并不会一次创建所有数据列/行的显示对象 (ItemRenderer),它仅会创建在屏幕上可见的数据列/行,并且重复利用这些显示对象,以提交运行时效率. 所以拖动滚动条时候很容易出现花屏 或者 空白. 原因是Tree中的也是用的itemRender产生延迟造成的

  • asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

    自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类库,如果本地没有,也可以直接引用下面地

  • 拉动滚动条加载数据的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

  • 无刷新动态加载数据 滚动条加载适合评论等页面

    无刷新动态加载数据 滚动条加载适合评论等页面

    滚屏加载更多数据,适合评论等页面 本例的数据库很简单,一看就明了   复制代码 代码如下: <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

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

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

    昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 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提示效果完整示例【附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(); $("

随机推荐