頁面返回頂部有很多漂亮的形式，今天這里分享一個返回頂部的兩個小動畫。

效果一：

效果而：

組件引入：

<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"><imgclass="top"src="向上箭頭圖片 "/></div></div><!-- <div class="goTopBT"><div class="actGotop"><a href="javascript:;" title="返回頂部"></a></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

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

總結

以上是生活随笔為你收集整理的js制作返回顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。