js制作返回顶部

深碍√TFBOYSˉ_ 2023-02-20 03:04 24阅读 0赞

页面返回顶部有很多漂亮的形式，今天这里分享一个返回顶部的两个小动画。

**效果一：**  
![在这里插入图片描述][20200622190305716.gif]

**效果而：**  
![在这里插入图片描述][20200622190315778.gif]

**组件引入：**

<goTop></goTop>
    
      data() { 
        return { 
         test:“222”
        }
      },
      components: { 
    goTop
    }

组件包含两个文件  
`GoToTop.js` 和`goTop.vue`

--------------------

**goTop.vue**

<template>
      <div class="goTopBT">
        <div class="goTop" id="js-go_top">
          <img
            class="top"
            src="向上箭头图片 "
          />
        </div>
      </div>
      
    </template>
    
    <script>
    export default { 
      name: 'goTop',
      data() { 
        return { }
      },
      created() { },
      mounted() { 
        this.goTop()
        //this.goTop2()
      },
      methods: { 
        goTop() { 
          $('#js-go_top').gotoTop({ 
            offset: 500, //距离顶部的位置
            speed: 800, //移动到顶部的速度
            /* iconSpeed : 300, //icon动画样式的速度*/
            animationShow: { 
              transform: 'translate(0,0)',
              transition: 'transform .5s ease-in-out'
            }, //icon动画样式显示时
            animationHide: { 
              transform: 'translate(100px,0)',
              transition: 'transform .5s ease-in-out'
            } //icon动画样式隐藏时
          })
        },
        goTop2() { 
          $(window).scroll(function() { 
            if ($(window).scrollTop() >= 100) { 
              $('.actGotop').fadeIn(300)
            } else { 
              $('.actGotop').fadeOut(300)
            }
          })
    
          $('.actGotop').click(function() { 
            $('html,body').animate({  scrollTop: '0px' }, 800)
          })
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .goTop > img { 
      width: 100px;
      height: 100px;
      cursor: pointer;
    }
    .goTop { 
      position: fixed;
      right: 7px;
      bottom: 20px;
      text-align: center;
    }
    .top { 
      color: #000;
      font-size: 20px;
    }
    
    .actGotop { 
      position: fixed;
      _position: absolute;
      bottom: 100px;
      right: 50px;
      width: 150px;
      height: 195px;
      display: none;
    }
    
    //火箭返回
    // .actGotop { 
    // position: fixed;
    // right: 20px;
    // bottom: 20px;
    // }
    // .actGotop a,
    // .actGotop a:link { 
    // width: 150px;
    // height: 195px;
    // display: inline-block;
    // background: url(火箭静态图.png)
    // no-repeat;
    // outline: none;
    // }
    
    // .actGotop a:hover { 
    // background: url(火箭动态图.gif)
    // no-repeat;
    // outline: none;
    // }
    
    //鼠标hover替换
    #hover { 
      position: relative;
      margin: 0 auto;
    }
    
    #hover img { 
      position: absolute;
      left: 0;
      -webkit-transition: opacity 2s ease-in-out;
      -moz-transition: opacity 2s ease-in-out;
      -o-transition: opacity 2s ease-in-out;
      transition: opacity 2s ease-in-out;
    }
    
    #hover img.top:hover { 
      opacity: 0;
    }
    
    img { 
      width: 200px;
      height: 200px;
      object-fit: contain;
    }
    </style>
    
    
    
    
    goTop  是图片演示，goTop2是小火箭演示。

**GoToTop.js**

/** * Created by doraqiao. */
    (function($){ 
        //参数opt表示后期根据需求设置icon的css属性值
        jQuery.fn.gotoTop = function(opt){ 
            var ele = this;
            var win = $(window);
            var doc = $('html,body');
            var index = false;
    
            //默认icon的css属性值
            var defaultOpt = { 
                offset : 420,
                speed : 500,
                iconSpeed : 200,
                animationShow : { 'opacity' : '1'},
                animationHide : { 'opacity' : '0'}
            };
    
            //将自定义icon的css属性值更新到options中
            var options = $.extend(defaultOpt,opt);
    
            //点击icon返回顶部
            ele.click(function(){ 
                doc.animate({ scrollTop : '0'},options.speed);
            });
    
            //判断icon动画样式是不是transform
            $.each(options.animationShow,function(i){ 
                if(i == 'transform'){ 
                    index = true;
                }
            });
    
            //icon动画样式显示时
            function animateShow(){ 
                if(index){ 
                    ele.css(options.animationShow);
                }else{ 
                    ele.stop().animate(options.animationShow,options.iconSpeed);
                }
            }
    
            //icon动画隐藏时
            function animateHide(){ 
                if(index){ 
                    ele.css(options.animationHide);
                }else{ 
                    ele.stop().animate(options.animationHide,options.iconSpeed);
                }
            }
    
            //当屏幕的高度大于options.offset时，显示icon（前提是icon事先隐藏了）
            win.scroll(function(){ 
                /* console.log(win.scrollTop())*/
                if(win.scrollTop() > options.offset){ 
                    animateShow();
                }else{ 
                    animateHide();
                }
            });
    
            //如果屏幕里顶部的高度大于设置的offset，则直接将icon显示出来（而不是等滚动事件发生后才显示出来）
            if(win.scrollTop() > options.offset){ 
                ele.css(options.animationShow);
            }else{ 
                ele.css(options.animationHide);
            }
        }
    }(jQuery));

该项目依赖于 jquery所有需要安装jquery

**vue.config.js**

//引入ProvidePlugin
       config.plugin('provide').use(webpack.ProvidePlugin, [
         { 
           $: 'jquery',
           jquery: 'jquery',
           jQuery: 'jquery',
           'window.jQuery': 'jquery'
         }
       ])

[20200622190305716.gif]: https://img-blog.csdnimg.cn/20200622190305716.gif
[20200622190315778.gif]: https://img-blog.csdnimg.cn/20200622190315778.gif