精华内容
下载资源
问答
  • js滚动条回到顶部的代码,里面的js代码比较简单,很适合学习。
  • js滚动条回到顶部的代码。复制代码 代码示例://怎么获取网页的高度 让页面一出来就滚动条在最底端function myScroll(){//前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取var x=document.body....

    js滚动条回到顶部的代码。

    复制代码 代码示例:

    //怎么获取网页的高度 让页面一出来就滚动条在最底端

    function myScroll()

    {

    //前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取

    var x=document.body.scrollTop||document.documentElement.scrollTop;

    var timer=setInterval(function(){

    x=x-100;

    if(x<100)

    {

    x=0;

    window.scrollTo(x,x);

    clearInterval(timer);

    }

    window.scrollTo(x,x);

    },"250");

    }

    初始化

    style="position:fixed;right:10px;bottom:50px;width:20px;height:70px;background-color:red;cursor:hand;"

    οnclick="myScroll()">返回顶端

    展开全文
  • 我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部,但是实际操作中,我们往往需要在某些特定操作后让滚动条回到顶部 下面以点击按钮,让滚顶条回到顶部为例,写一个简单的实现代码: scroll....

    首先官方文档中有介绍scroll-view的相关属性:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

    我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部,但是实际操作中,我们往往需要在某些特定操作后让滚动条回到顶部

    下面以点击按钮,让滚顶条回到顶部为例,写一个简单的实现代码:

    scroll.wxml:

    <view class="homes">
        <!-- 小程序滚动容器 -->
        <view class="home_container">
            <!-- 左侧点击部分  假如右侧的滚动条不在顶部,点击按钮的时候,滚动条回到顶部-->
            <view  class="left_menu">
              <button bindtap="backTop">点击回到顶部</button>
            </view>
            <!-- 右侧滚动条部分   
                 其中  scroll-top="{{scrollTop}}"设置成变量,是因为如果直接在标签里写死的话,只会在页面初始化的时候,在顶部,等于没写
            -->
            <scroll-view scroll-top="{{scrollTop}}" scroll-y class="right_menu">
                <view>1</view>
                <view>2</view>
                <view>3</view>
                <view>4</view>
                <view>5</view>
                <view>6</view>
                <view>7</view>
                <view>8</view>
                <view>9</view>
                <view>10</view>
                <view>11</view>
                <view>12</view>
                <view>13</view>
                <view>14</view>
                <view>15</view>
                <view>16</view>
                <view>17</view>
                <view>18</view>
                <view>19</view>
                <view>20</view>
                <view>21</view>
                <view>22</view>
                <view>23</view>
                <view>24</view>
                <view>25</view>
                <view>26</view>
                <view>27</view>
                <view>28</view>
                <view>29</view>
                <view>30</view>
                <view>31</view>
                <view>32</view>
                <view>33</view>
                <view>34</view>
                <view>35</view>
                <view>36</view>
                <view>37</view>
                <view>38</view>
                <view>39</view>
                <view>40</view>
                <view>41</view>
                <view>42</view>
                <view>43</view>
                <view>44</view>
                <view>45</view>
                <view>46</view>
                <view>47</view>
                <view>48</view>
                <view>49</view>
                <view>50</view>
                <view>51</view>
                <view>52</view>
                <view>53</view>
                <view>54</view>
                <view>55</view>
                <view>56</view>
                <view>57</view>
                <view>58</view>
                <view>59</view>
                <view>60</view>
                <view>61</view>
                <view>62</view>
                <view>63</view>
                <view>64</view>
                <view>65</view>
                <view>66</view>
                <view>67</view>
                <view>68</view>
                <view>69</view>
                <view>70</view>
                <view>71</view>
                <view>72</view>
                <view>73</view>
                <view>74</view>
                <view>75</view>
                <view>76</view>
                <view>77</view>
                <view>78</view>
                <view>79</view>
                <view>80</view>
                <view>81</view>
                <view>82</view>
                <view>83</view>
                <view>84</view>
                <view>85</view>
                <view>86</view>
                <view>87</view>
                <view>88</view>
                <view>89</view>
                <view>90</view>
                <view>91</view>
                <view>92</view>
                <view>93</view>
                <view>94</view>
                <view>95</view>
                <view>96</view>
                <view>97</view>
                <view>98</view>
                <view>99</view>
                <view>100</view>
            </scroll-view>
        </view>
    </view>

     scroll.css:

    /* 整个页面的高度为100% */
    page{
      height: 100%;
    }
    .homes{
      height: 100%;
    }
    .home_container{
      /* 1.容器总高度为100vh
         2.上方搜索菜单为90rpx
         3.下方tabBar菜单的高度不用减
      */
      height: calc(100vh - 90rpx);
      display: flex;
    }
    .left_menu{
      flex:2;
      background-color: sandybrown;
    }
    .right_menu{
      flex:5;
      background-color: springgreen;
    }

    scroll.js:

    // pages/scroll/scroll.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 回到顶部变量
        scrollTop:0
      },
    /**
     * 点击按钮,滚动条回到页面顶部
     */
      backTop:function(){
          this.setData({
            scrollTop:0
          })
      }
    })

     

    展开全文
  • js控制滚动条回到顶部

    千次阅读 2016-04-20 11:17:48
    scroll:滚动条,一旦页面或者元素内容超过承载元素宽/高就会出现,有时候在开发app小屏幕web时候会要求相应时候滚动条回到顶部 我是将,其中滚动条距离顶部的位置为scrollTop,一般将其至为 0 ,即可将滚动条置为...

    scroll:滚动条,一旦页面或者元素内容超过承载元素宽/高就会出现,有时候在开发app小屏幕web时候会要求相应时候滚动条回到顶部

    我是将,其中滚动条距离顶部的位置为scrollTop,一般将其至为  0 ,即可将滚动条置为顶部;也可以利用scrollTo(0,0)将滚动条滚动到最顶端

    一定要考虑到浏览器兼容,设置如下:

    Firefox : document.documentElement.scrollTop = 0;

    Safari / Chrome : document.body.scrollTop = 0;

    展开全文
  • 要求:在页面右下角有一个div标签,点击div标签浏览器右边滚动条回到顶部 思路:通过设置 浏览器卷去高度 判断滚动条是否到达顶部。 步骤: 1、对浏览器页面进行简单布局 <style> * {margin: 0; padding:...

    要求:在页面右下角有一个div标签,点击div标签浏览器右边滚动条回到顶部

    思路:通过设置 浏览器卷去高度 判断滚动条是否到达顶部。

    步骤:

    1、对浏览器页面进行简单布局

    <style>
    * {margin: 0; padding: 0;}
    body {height: 1000px; background: #000;}
    div {width: 70px; height: 50px; background-color: skyblue; position: fixed; bottom: 50px;
    right: 50px;}
    </style>
    <body>
        <div id="btn">回到顶部</div>
    </body>

    2、对 div 绑定点击事件

    btn.onclick = function () {
    
    }

    3、通过设置定时器不断使浏览器卷去高度减少,并判断当卷去高度为 0 时 达到顶部,停止定时器。

    btn.onclick = function () {         // 对 div 绑定的点击事件
                timer = setInterval(function () {     // 设置定时器
                    document.documentElement.scrollTop -= 20    // 使高度每次减少20px
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer)    // 关闭定时器
                    }
                }, 50)   // 50毫秒执行一次
            } 

    完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                height: 1000px;
                background: #000;
            }
    
            div {
                width: 70px;
                height: 50px;
                background-color: skyblue;
                position: fixed;
                bottom: 50px;
                right: 50px;
            }
        </style>
    </head>
    
    <body>
        <div id="btn">回到顶部</div>
        <script>
            var timer = 0
            btn.onclick = function () {
                timer = setInterval(function () {
                    document.documentElement.scrollTop -= 20
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer)
                    }
                }, 50)
            } 
        </script>
    </body>
    
    </html>
    

    展开全文
  • 大话滚动条回到顶部

    2016-08-17 13:44:03
    在实际过程中,当页面内容...即当页面滚到到一定程度时,出现回到顶部的按钮,点击回到顶部的按钮,滚动条重新回到顶部。 具体需要注意以下两点:1. 控制回到顶部按钮的出现和隐藏;2. 点击回到顶部按钮页面如何处理。
  • jquery-1.11.1.min.js
  • 只需要加上href=“###”,就可以了,滚动条就会停在原地不动了。...滚动条回到顶部:scrolltotop.init({title: '回顶部'}); 下面是滚动条回到顶部的代码 //** jQuery Scroll to Top Control script- (c) Dynamic
  • elementUI 表格翻页后,滚动条回到顶部 elementUI 表格翻页后,滚动条回到顶部 在页面翻页触发的方法后面添加(记得现在table上添加 ref=‘table’) this.$nextTick(() => { this.$refs.table.bodyWrapper....
  • 滚动条回到顶部

    2019-09-27 01:29:08
    怎么获取网页的高度 让页面一出来就滚动条在最底端 function myScroll() { // 前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取 var x = document.body.scrollTop || document....
  • JS-JQ-滚动条回到顶部

    2019-10-09 01:02:04
    byse) //如果回到顶部的时候byse=false,  {  clearInterval(timer);  }  byse=false;  }  div1.onclick=function()  {  timer=setInterval(function(){  var...
  • 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部。于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修改,终于让它支持了。 运行效果 ...
  • 第二次发生过这种情况,js或者jquery使用animate滚动滚动条顶部或者任意一个 位置,滚动条就好像被锁定一样,动也动不了,用过stop(),没有效果,求解,下面是代码! ``` <script src="j.js"> * { padding:0...
  • <html> <head> <style> div{ height:1500px; width:100%; } img{ position:fixed; right:20px;...script src="jquery-1.11.1.min.js"></.
  • 开发首页出现滚动条回到顶部的需求,也不能直接回到,要缓慢回滚。 旧项目使用的是JQuery的 $("html,body").animate({scrollTop:0},500); //动画化滚动到顶部。varscrolltop=$(this).scrollTop();//位置 新项目...
  • js控制点击,页面缓慢回到顶部 jq版本,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=...
  • 2.页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可视区上面, 内容被隐藏了一点, 但是手动拉正常展示以后, 问题就不再重现 解决办法(针对单个页面这个问题的) // 在/b页面, vue的...
  • 每次动态加载数据后我的页面滚动条回到了页面的顶端,就好像页面刷新了一样,问题定位下来就是由于加了lazyload方法后就出现的。有没有大神可以帮忙解决这个问题,最终效果是需要有图片异步加载的效果并且页面不会...
  • 怎么设置滚动条复位?现在项目要求在用户浏览网页过程中如果点击一个按钮,这时候滚动条要恢复到最初的顶部,这个怎么实现?
  • js控制”回到顶部“按钮 1、滚动一屏后再显示 2、滚动条平滑滚动。 用时需要注意地方把按钮的ID改为gotop或者将改js里为相应ID 同时css需要先隐藏,设置style=”display:none”window.onload = function () { ...
  • 1.back.js function goTop() { this.top = function(obj) { console.log(obj) // 获取返回按钮 // el 为元素节点的选择器 var btn = document.querySelector(obj.el) // 获取屏幕宽度/高度 ...
  • jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高度 : $(document).height(); 获取页面的文档宽度 :$...
  • this.$refs.table.bodyWrapper.scrollTop = 0 // this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight
  • 简单了解导航钩子 vue-router 提供的导航钩子主要用来拦截...要想跳转路由时滚动条回到顶部,只需要在main.js里用afterEach routes . afterEach (( to , from , next ) => { window . scrollTo ( 0 , 0 ); });
  • timer=setInterval(function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var ispeed=Math.floor(-scrollTop/6); console.log(ispeed) ...
  • function top() { let currentPosition, timer timer = setInterval(function () { currentPosition = document.documentElement.scrollTop || document.body.scrollTop ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,414
精华内容 4,565
关键字:

js滚动条回到顶部