精华内容
下载资源
问答
  • 滚动条回到顶部

    2021-05-29 10:30:02
    滚动条回到顶部 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 简介 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 回到顶部 代码 ...

    滚动条回到顶部

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    简介

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    回到顶部


    代码

    点击按钮,让滚动条瞬间回到顶部

    scrollTop 获取匹配元素相对滚动条顶部的偏移。

    下面实现平滑回到顶部

    //总距离

    //总时间

    //间隔时间

    //单元移动距离

     

    //使用循环定时器不断滚动

    //到达顶部,停止定时器

     

     

     

     

     

    先获取到数据

     

    //使用循环定时器不断滚动

    //到达顶部,停止定时器

     

    展开全文
  • js滚动条回到顶部的代码,里面的js代码比较简单,很适合学习。
  • 我们可以看到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滚动条回到顶部的代码。复制代码 代码示例://怎么获取网页的高度 让页面一出来就滚动条在最底端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()">返回顶端

    展开全文
  • jquery设置div的滚动条回到顶部 // 将div的滚动条复位到顶部 $( "#div1" ).animate( { scrollTop: 0 } );

      jquery设置div的滚动条回到顶部

    // 将div的滚动条复位到顶部
    $( "#div1" ).animate( { scrollTop: 0 } );

     

    展开全文
  • elementUI 表格翻页后,滚动条回到顶部 在页面翻页触发的方法后面添加(记得现在table上添加 ref=‘table’) this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) ...
  • js控制滚动条回到顶部

    千次阅读 2016-04-20 11:17:48
    scroll:滚动条,一旦页面或者元素内容超过承载元素宽/高就会出现,有时候在开发app小屏幕web时候会要求相应时候滚动条回到顶部 我是将,其中滚动条距离顶部的位置为scrollTop,一般将其至为 0 ,即可将滚动条置为...
  • jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便。下面就介绍用jquery实现的滚动到顶部的代码 $(function(){ //点击...
  • 要求:在页面右下角有一个div标签,点击div标签浏览器右边滚动条回到顶部 思路:通过设置 浏览器卷去高度 判断滚动条是否到达顶部。 步骤: 1、对浏览器页面进行简单布局 <style> * {margin: 0; padding:...
  • elementUI 表格翻页后 滚动条回到顶部 在触发翻页事件添加 (在table添加ref=‘table’) this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 })
  • 大话滚动条回到顶部

    2016-08-17 13:44:03
    在实际过程中,当页面内容...即当页面滚到到一定程度时,出现回到顶部的按钮,点击回到顶部的按钮,滚动条重新回到顶部。 具体需要注意以下两点:1. 控制回到顶部按钮的出现和隐藏;2. 点击回到顶部按钮页面如何处理。
  • vue el-dialog 点击之后滚动条回到顶部

    千次阅读 2019-12-19 11:00:45
    vue el-dialog 点击之后滚动条回到顶部 记录你当前滚动条的位置 <el-dialog :title="baseTitle" :visible.sync="visible" :before-close="cancelHandle" :close-on-click-modal="false" width="760px" :lock-...
  • 在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1、当页面整体都要滚动到顶部的情况 router.afterEach(() => { document.body.scrollTop ...
  • 开发首页出现滚动条回到顶部的需求,也不能直接回到,要缓慢回滚。 旧项目使用的是JQuery的 $("html,body").animate({scrollTop:0},500); //动画化滚动到顶部。varscrolltop=$(this).scrollTop();//位置 新项目...
  • <html> <head> <style> div{ height:1500px; width:100%; } img{ position:fixed; right:20px; bottom:50px; cursor:pointer; } .../.
  • jquery 滚动条回到顶部

    2016-09-30 10:39:32
    window.scrollTo(0, 1); }
  • $("html,body").animate({scrollTop:0},200);
  • jquery-1.11.1.min.js
  • css .top_show { pointer-events: auto; opacity: 1; } .dt-back-top { position: fixed; bottom: 3.07rem; right: .53rem; display: flex; justify-content: center; align-items: center;...height:...
  • 问题场景:在tab切换表格或者切换页面时,希望滚动条每次都回到顶部。 代码: table上添加 ref='table' this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 })
  • 在页面翻页触发的方法后面添加(记得现在table上添加 ref=‘table’) this.$nextTick(() => { this.$refs.table.bodyWrapper.scrollTop = 0 }) 转摘:...
  • element ui table 滚动条回到顶部、底部

    千次阅读 2019-01-09 12:19:29
    element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题; 滚动到第一行: this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行: this.$refs.table.bodyWrapper.scrollTop =this.$refs.table...
  • vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置,这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的。 解决办法是在切换路由的时候,将滚动条...
  • 当在图1并且滚动条不在顶部触发某事件时,内部灰色div在不同情况高度改变,可能会超出外层div会出现滚动条,也可能不超出外层div。可以通过 document.getElementById("外层divID").scrollTop = 0 使滚动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,845
精华内容 8,738
关键字:

滚动条回到顶部