scrollto_scrolltop - CSDN
  • Window scrollTo() 方法

    万次阅读 2017-04-12 10:40:46
    scrollTo() 方法可把内容滚动到指定的坐标。 语法 scrollTo(xpos,ypos)   参数 描述 xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos 必需。要在窗口文档显示区左上角显示的...

    定义和用法

    scrollTo() 方法可把内容滚动到指定的坐标。

    语法

    scrollTo(xpos,ypos)

     

    xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
    ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

    实例

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="gb2312">
    5. <title>菜鸟教程(runoob.com)</title>
    6. <script>
    7. function scrollWindow(){
    8. window.scrollTo(100,500);
    9. }
    10. </script>
    11. </head>
    12. <body>
    13. <input type="button" onclick="scrollWindow()" value="滚动条"/>
    14. <p>滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动滚动</p>
    15. <br>
    16. <br>
    17. <br>
    18. <br>
    19. <br>
    20. <br>
    21. <br>
    22. <br>
    23. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    24. <br>
    25. <br>
    26. <br>
    27. <br>
    28. <br>
    29. <br>
    30. <br>
    31. <br>
    32. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    33. <br>
    34. <br>
    35. <br>
    36. <br>
    37. <br>
    38. <br>
    39. <br>
    40. <br>
    41. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    42. <br>
    43. <br>
    44. <br>
    45. <br>
    46. <br>
    47. <br>
    48. <br>
    49. <br>
    50. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    51. <br>
    52. <br>
    53. <br>
    54. <br>
    55. <br>
    56. <br>
    57. <br>
    58. <br>
    59. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    60. <br>
    61. <br>
    62. <br>
    63. <br>
    64. <br>
    65. <br>
    66. <br>
    67. <br>
    68. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    69. <br>
    70. <br>
    71. <br>
    72. <br>
    73. <br>
    74. <br>
    75. <br>
    76. <br>
    77. <p>滚动滚动滚动滚动滚动滚动滚动滚动</p>
    78. <br>
    79. <br>
    80. <br>
    81. <br>
    82. <br>
    83. <br>
    84. <br>
    85. <br>
    86. </body>
    87. </html>
     

    运行效果



     
    • a261f9e0-3025-3095-a022-7a85c7e5dab0-thumb.png
    • 大小: 35.1 KB
    展开全文
  • ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO...

    ScrollTo:实现平滑滚动到页面指定位置


    ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合,本文以DEMO为示例讲解该插件的应用。


    使用方法

    ScrollTo:实现平滑滚动到页面指定位置演示地址:http://www.helloweba.com/demo/scrollto/

    1、准备jQuery库和scrollTo.js插件。

    1. <script type="text/javascript" src="js/jquery.js"></script>   
    2. <script type="text/javascript" src="js/jquery.scrollTo.js"></script>  

    2、XHTML

    1.    
    2. <ul class="nav">   
    3.    <li><a href="#" class="nav_pro">产品展示</a></li>   
    4.    <li><a href="#" class="nav_news">新闻中心</a></li>   
    5.    <li><a href="#" class="nav_ser">服务支持</a></li>   
    6.    <li><a href="#" class="nav_con">联系我们</a></li>   
    7.    <li><a href="#" class="nav_job">人才招聘</a></li>   
    8. </ul>   
    9. <div id="pro" class="box">   
    10.    <h3>产品展示</h3>   
    11. </div>   
    12. <div id="news" class="box">   
    13.    <h3>新闻中心</h3>   
    14. </div>   
    15. <div id="ser" class="box">   
    16.    <h3>服务支持</h3>   
    17. </div>   
    18. <div id="con" class="box">   
    19.    <h3>联系我们</h3>   
    20. </div>   
    21. <div id="job" class="box">   
    22.    <h3>人才招聘</h3>   
    23. </div>  

    我们用一个页面展示导航和导航对应的每个模块。

    3、CSS

    1. .nav{width:500px;margin:20px auto;}   
    2. .nav li{float:left; width:100px; height:24px; line-height:24px}   
    3. .box{height:500px}   
    4. .box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}   
    5. #pro,#ser{background:url(img/bg.jpg)}   
    6. #news,#con{background:url(img/bg2.gif)}  

    4、使用scrollTo.js插件

    1. $(function(){   
    2.     $(".nav_pro").click(function(){   
    3.         $.scrollTo('#pro',500);   
    4.     });   
    5.     $(".nav_news").click(function(){   
    6.         $.scrollTo('#news',800);   
    7.     });   
    8.     $(".nav_ser").click(function(){   
    9.         $.scrollTo('#ser',1000);   
    10.     });   
    11.     $(".nav_con").click(function(){   
    12.         $.scrollTo('#con',1200);   
    13.     });   
    14.     $(".nav_job").click(function(){   
    15.         $.scrollTo('#job',1500);   
    16.     });   
    17. });  

    当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。在本例中,只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动,传冲效果等,具体可以参照官方网站的例子:http://demos.flesler.com/jquery/scrollTo/


    展开全文
  • 1.初始化scroll 这个博主就不贴图了大家都会 2.利用vue router的导航守卫把离开时的位置信息保存到vuex上 ...3.在未使用scrollTo方法前记下scroll的maxScrollY 方法:console.log(this.scroll.ma...

    1.初始化scroll

       这个博主就不贴图了大家都会
    

    2.利用vue router的导航守卫把离开时的位置信息保存到vuex上

    这里写图片描述
    注意导航守卫要用在路由组件内,不然无效

    3.在未使用scrollTo方法前记下scroll的maxScrollY

        方法:console.log(this.scroll.maxScrollY) scroll为你new的Bscroll实例名
        前提是你的scroll能正常使用
    

    4.在钩子上使用scrollTo方法和修改scroll的属性这里写图片描述

    这样就能实现跳回页面上次浏览位置了

    博主是刚接触前端的小白,如果大家有建议,欢迎留言交流


    版权声明:本文为博主原创文章,未经博主允许不得转载。

    展开全文
  • JavaScript scrollTo() 函数示例

    千次阅读 2014-09-26 16:14:33
    JavaScript scrollTo() 函数示例 潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JavaScript scrollTo() 函数示例</title>
    </head>
    <body>
    <input type="button" value="横向滚动条移动到相对于窗体宽度为20像素的位置,纵向滚动条移动到相对于窗体高度为60像素的位置!" οnclick="window.scrollTo(20,60);" />
    <p>潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu潇湘子dreamdu</p>
    <p>1潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>2潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>3潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>
    <p>潇湘子dreamdu</p>




    </body>
    </html>
    展开全文
  • 涉及到滑动,就涉及到VIEW,大家都知道,android的UI界面都是由一个一个的View以及View的派生类组成,View作为基类,而常用的布局里面的各种布局就是它派生出来的ViewGroup的子类,ViewGroup作为各个组件的容器搭建了...
  • scrollTo(x,y)

    2018-10-03 11:32:53
  • scrollTo方法的平滑滚动

    千次阅读 2019-07-17 15:09:14
    scrollTo有两种语法: 1.scrollTo(x,y) //指定滚动到x轴和y轴的位置 2.scrollTo(options) //options有三个参数,(left,top,behavior ), top 等同于 y-coord left 等同于 x-coord behavior 类型String,表示滚动行为...
  • 在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll、scrollBy和 scrollTo,三个方法都带两个参数:x(X...
  • 项目里需要用到屏幕滚到的行为。查询api 之后发现了滚动接口中的两个。然后又很奇怪他们直接的区别,应该如何选择。 首先时mdn的解释,这里说一句,mdn此处的翻译不是特别的准确,也可能是按照功能去翻译的。...
  • 最简单的滚动到(scrollto)插件,功能少,jquery代码少,逻辑简单,一看就明白。这种简单的jquery插件有时候还是蛮有用的。 这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法,比如,可以做出 滚动到顶部...
  • 本文原创 ,转载必须注明出处 :http://blog.csdn.net/qinjuning 今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与 scrollBy这两个函数的区别 。...
  • scrollToscrollTo.js

    千次阅读 2013-08-18 23:25:47
    最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。 HTML DOM里面定义了scrollTo方法,用法:scrollTo(xpos,ypos),把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能...
  • 1:使用window.scrollTo()方法,但是这个方法是没有动画效果的,需要手动封装一下。 2:使用JQuery的动画函数,缺点比较明显:需要引入JQuery。 显然,选择第一种好很多。 以下为封装window.scrollTo()的方法...
  • scrollTo函数 --scrollHeight获取对象的滚动高度。 --scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --...
  • 用自己的电脑连接各种环境都没能重现,查了一下文档,发现window.scrollTo的参数有两种形式: 查看项目的代码,发现项目使用的是第二种,猜测会不会是浏览器版本不支持,查看同事的chorme,版本为59,自己电脑的...
  • 在实际开发中,我们总是会遇到需要View滑动的功能,那么可能就会用View的scrollTo(int x, int y)或者scrollBy(int x, int y)方法,但是当你使用这个方法之后,你会发现完全和你想的不是一回事!那么今天,我们就来...
  • 布局滑动 scrollTo 和 scrollBy 应用DEMO

    千次下载 热门讨论 2020-07-22 23:33:46
    android 布局之滑动探究 scrollTo 和 scrollBy 方法使用说明 对应的博文地址:http://blog.csdn.net/vipzjyno1/article/details/24577023
  • Android坐标系 scrollTo方法的原理

    千次阅读 2015-11-01 17:06:15
    View中的scrollTo方法配合Scroller类,可以实现视图的位移动画效果。相对于补间动画,这种实现方式更加灵活,而且不仅改变了视图的绘制位置,也改变了视图的点击区域,可以认为是一种“真实”的位置改变。对于初学者...
  • 使用scrollTo平滑滚动到顶部

    千次阅读 2019-07-04 18:47:38
    我一开始考虑使用动画,后来一想如果使用动画,滚动时间就固定了...答案是使用window.scrollTo(options)方法,options是一个对象,有三个属性: top 等同于 y-coord left 等同于 x-coord behavior 类型String,表示滚...
  • scrollTo-- 在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置(如果没有滚动条,页面不会发生任何变化) scrollTo,中文"滚动到" 引用...
1 2 3 4 5 ... 20
收藏数 24,467
精华内容 9,786
关键字:

scrollto