精华内容
下载资源
问答
  • 页面返回顶部

    2018-12-17 09:53:13
    一、JS返回顶部 function fnbacktop(){ $('.backtop').click(function(){ $('.content').scrollTop(0); }); } 二、apicloud 返回顶部 api.pageUp(function( ret, err ){ }); 此方法主要适用t...

    一、JS返回顶部

    	function fnbacktop(){
          $('.content').on('scroll',function(){
              var t = $('.content').scrollTop();
              if(parseInt(t) > 400){
                  $('#home_index .backtop').show();
              }else{
                  $('#home_index .backtop').hide();
              }
          });
          $('.backtop').click(function(){
            $('.content').scrollTop(0);
          });
        }
    

    二、apicloud 返回顶部

    api.pageUp(function( ret, err ){          	
       
    });
    

    此方法主要适用table组成的页面

    展开全文
  • 二、构造滚动动画页面回到顶部.gif页面回到顶部.box {width: 100px;height: 100px;background-color: #7bef32;position: fixed;right: 20px;top: 7000px;text-align: center;line-height: 10...

    一、a 标签链接 Id 的方法

    我是顶部

    此种方法没什么特效过程,几乎是直接到顶。

    二、构造滚动动画

    c834b8f90518

    页面回到顶部.gif

    页面回到顶部

    .box {

    width: 100px;

    height: 100px;

    background-color: #7bef32;

    position: fixed;

    right: 20px;

    top: 7000px;

    text-align: center;

    line-height: 100px;

    }

    我是顶部

    回到顶部

    var box = document.getElementById("box");

    window.onscroll = function(){

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

    if(win_scrol>700){

    box.style.top = 700 +"px";

    }else{

    box.style.top = 7000 +"px";

    }

    }

    box.onclick = function(){

    scrollAnimate(0,1000);

    }

    function scrollAnimate(target,time){

    var frameNumber = 0; //帧编号

    var start = document.body.scrollTop || document.documentElement.scrollTop; //起点

    var distance = target - start;

    var interval = 10;

    var maxFrame = time / interval;

    clearInterval(timer);

    var timer = setInterval(function(){

    frameNumber++;

    if(frameNumber == maxFrame){

    clearInterval(timer);

    }

    //第一个参数t表示当前帧编号

    //第二个参数b表示起始位置

    //第三个参数c表示变化量

    //第四个参数d表示总帧数

    //返回当前帧应该在哪儿

    document.body.scrollTop = document.documentElement.scrollTop = CubicEaseInOut(frameNumber,start,distance,maxFrame);

    },interval);

    }

    function CubicEaseInOut(t, b, c, d) {

    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;

    return c / 2 * ((t -= 2) * t * t + 2) + b;

    }

    展开全文
  • 页面回到顶部

    2019-03-15 19:00:25
    -- 回到顶部 --&amp;amp;gt; &amp;amp;lt;view class='goTop' hidden='{{showTop}}' bindtap='goTop'&amp;amp;gt; &amp;amp;lt;image src='../../resources/images/goTop.png'&amp;amp;gt;&...

    多话不说,直接上代码,简单易懂

    1.首先 .wxml 代码

    <!-- 回到顶部 -->
    <view class='goTop' hidden='{{showTop}}' bindtap='goTop'>
      <image src='../../resources/images/goTop.png'></image>    <!-- 图片按钮为图片+背景 -->
    </view>
    

    2.其次 .wxss 代码

    .goTop{       /* 背景样式设置 */
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      position: fixed;
      bottom: 100rpx;
      right: 30rpx;
      background: #000000;
      opacity:0.5;
    }
    .goTop image{     /* 向上图片样式设置 */
      width: 60rpx;
      height: 60rpx;
      position: relative;
      top: 15rpx;
      left: 15rpx;
    }
    

    3.页面滚动时触发的事件

    onPageScroll:function(e){
        //console.log(e.scrollTop);   //当前页面的高度
        if (e.scrollTop >= 400){        //当前单位为 px
          this.setData({
            showTop:false
          });
        }
        else{
          this.setData({
            showTop: true
          });
        }
      },
    

    4.回到顶部按钮出现后,点击事件触发

      //点击回到顶部按钮
      goTop:function(){
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300        //300ms回到顶部
        })
      },
    
    展开全文
  • JS实现页面返回顶部

    千次阅读 2018-07-15 21:43:35
    页面返回顶部是在Web中常见的效果,在一个很长的页面中,页面返回顶部按钮可以方便用户回到页面的顶部,增强用户体验。 这里我要实现的效果图如下: 其html代码如下: &amp;amp;lt;body style=&amp;...

    页面返回顶部是在Web中常见的效果,在一个很长的页面中,页面返回顶部按钮可以方便用户回到页面的顶部,增强用户体验。
    这里我要实现的效果图如下:
    这里写图片描述
    其html代码如下:

    <body style="height: 1800px;">
    <div class="to-top"></div>
    </body>

    css代码如下:

    .to-top {
      width: 37px;
      height: 37px;
      background: url("to-top.png") no-repeat;
      cursor: pointer;
      position: absolute;
      right: 0;
    }
    
    .to-top:hover {
      background: url("to-top.png") -38px no-repeat;
    }

    这里是我用到的资源图片:
    这里写图片描述
    实现页面返回顶部的逻辑也很简单:

    1. 返回顶部的按钮要随着页面的滚动而保持在页面的右下角;
    2. 点击返回顶部的按钮,控制滚动条回到页面顶部,即控制滚动条的滚动距离为0。

    其js代码如下:

    window.onload = function () {
    
      var oToTop = document.querySelector('.to-top');
      /**
       * 元素可视区高度
       * @type {number}
       */
      var viewHeight = document.documentElement.clientHeight;
    
      /**
       * 获取元素垂直滚动的像素数
       * document.documentElement.scrollTop 适用IE/Firefox浏览器
       * document.body.scrollTop            适用Safari/Chrome浏览器
       * @type {number}
       */
      var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
    
      oToTop.style.top = heightTop + viewHeight - oToTop.offsetHeight + 'px';
      window.onscroll = function () {
        scroll()
      };
    
      function scroll() {
        /**
         * 元素可视区高度
         * @type {number}
         */
        var viewHeight = document.documentElement.clientHeight;
    
        /**
         * 获取元素垂直滚动的像素数
         * document.documentElement.scrollTop 适用IE/Firefox浏览器
         * document.body.scrollTop            适用Safari/Chrome浏览器
         * @type {number}
         */
        var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
    
        oToTop.style.top = viewHeight + heightTop - oToTop.offsetHeight + 'px';
      }
    
      oToTop.addEventListener('click', function () {
        var iSpeed = 0;
    
        clearInterval(iTimer);
        var iTimer = setInterval(function () {
          var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
          console.log(heightTop);
          iSpeed = Math.floor((0 - heightTop) / 8); // 当速度小于0时 要向下取整才能够准确的到达目标值
          document.body.scrollTop = heightTop + iSpeed;
          if (document.body.scrollTop <= 0) {
            clearInterval(iTimer);
          }
        }, 30);
      }, false)
    
    }

    这里我们需要注意的是document.body.clientHeightdocument.documentElement.clientHeight的区别,前者是获取body元素高度,后者是获取元素可视区高度。其中这里我们也发现滚动条有缓动的效果,就是随着滚动条靠近页面的顶部,滚动条运动的速度越来越慢,这里主要是利用了js的setInterval方法来实现的。还有我们需要认识到一个本质:当document.body.scrollTop的值为0时,滚动条也就在顶部了。

    展开全文
  • 主要为大家详细介绍了6行代码实现微信小程序页面返回顶部效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 用css和jQuery实现了一个页面返回顶部的功能:当页面滑动到一定距离,出现返回顶部的标志,点击后快速滑动返回页面顶部。 效果预览: 思路: 在页面顶部时没有返回顶部标志,页面滑动一定距离标志出现。这里...
  • 博客园页面添加返回顶部 TOP 按钮TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可以将背景色 background-color 改为:background:url...
  • 下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 页面回到顶部
  • 在很多网站中,如果滚动到页面下方,会在右下角一个固定位置出现“返回顶部”的按钮,点一下浏览器滚动条就自动回到顶部了,今天研究了一下,实现的效果如图:首先必须感谢知乎,因为这个按钮的样式就是照抄他们的,...
  • 1.全局设置切换路由页面回到顶部 在nuxt.config.js:中配置 module.exports = { router: { scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } } } 2默认情况下,从当前页面切换至目标页面...
  • 下面跟大家分享一下如何点击固定按钮使页面回到顶部,这里使用到的是JS中的scrollTo方法。这个方法是把内容滚动到指定的坐标,所以在滚动之前就要定义好目的地坐标,现在我们要回到页面顶部,就把坐标设为(0,0)。...
  • 页面回到顶部的三种实现(锚标记,js) 一、使用锚标记返回页面顶部 使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。 页面顶部放置: <a name="top" id="top">&...
  • 页面出现滚动条时,稍稍滑动滚动条,页面右下角就会出现【返回顶部】的按钮,点击该按钮,返回到页面顶部,具体实现方式为: 1、当前页面中引入scrolltop.js,内容: /*长页面返回顶部*/ function goTopEx() { ...
  • 回到顶部——点击返回顶部按钮-e.scrollTop 按钮样式 <!-- 回到顶部 --> <div class="top"> ︿ <p>顶部</p> </div> .top { position: fixed; bottom: 50rpx; right: 50rpx; ...
  • 锚点:页面返回顶部

    2020-07-21 01:17:18
    案例描述 页面向下拉动时,返回按钮始终保持在页面右下位置,当单击返回按钮时,页面返回顶部
  • 给大家分享一个微信小程序页面返回顶部的效果,具体内容如下: 1、wxml代码 <scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1</view> <view>1&...
  • <view class="content">内容</view> <view class="backTop" bindtap='backTop' wx:if="{{backTopValue ==true}}">totop<.../*浮窗返回顶部*/ .content { width: 300rpx; height...
  • 页面滚动到一定高度出现返回顶部按钮,点击返回顶部,按钮消失 以下代码,新建组件,引用方可使用 <!-- 拖拽滑动 --> <template> <div id="default_drag_return" @click="topreturn()"> ↑ ...
  • 实现Android页面回到顶部

    千次阅读 2016-07-12 15:43:14
    情景:应用中可滚动内容过多的话,回到顶部需要滚动多次。 实现:直接回到顶部功能。方案:需要回到顶部的部分写在一个ScrollView内,设置ScollView回到顶部
  • 从A页面中间点击触发某事件跳转B,此时页面不会回到B页面顶部。 <template> <div class="policy-home"> //其他代码省略 <el-backtop ref="policyBackTop" target="#app"></el-backtop> ...
  • JS代码: //实现回到页面顶部 function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ //谷歌浏览器 return document.body.scrollTop;
  • 如何让页面回到顶部

    千次阅读 2017-02-15 11:48:46
    今天做一个需求要求阅读文章的时候可以一键回到顶部; $('html,body').animate({'scrollTop':0},100); 这个方式可以让页面回到任意高度,只需要更改scrollTop对应的值即可
  • Web JS实现页面返回顶部

    千次阅读 2017-04-12 09:54:57
    页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个“返回顶部”的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。
  • JS实现页面返回顶部的匀加速运动
  • JQuery实现页面回到顶部

    千次阅读 2014-02-28 15:21:52
    有了上面的html后,当我们点击”返回顶部”这个链接时,就会自动跳转到body标签的位置,也就是页面的顶部。 二、CSS(样式化) 之所以在上面html代码的标签中添加一个空的标签,目的是为了创建我们预想的返回...
  • <!--引入layui--> <link rel="stylesheet" type="text/css" href="'css/layui/css/layui.css"/> <script src="js/layui.js" type="text/... // 回到顶部 layui.use(['util', 'laydate', '
  • 原文:https://www.jianshu.com/p/c38c2d129ca0(感谢) <div class="gotop" v-if="showgo"> <button @click="gotop">top</button>...button @click="gobottom">.../butto...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,426
精华内容 35,370
关键字:

页面回到顶部