正文

vue3返回顶部组件及返回顶部js封装(代码片段)

发呆的薇薇°  发呆的薇薇°  2023-03-11  252

关键词：

介绍

vue3中，封装监听页面滚动的js，及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：

代码

封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；
在项目目录下新建 utils文件夹，并在该文件夹下创建index.js文件；在这文件里写全局通用的一些方法；现在需要用到的返回顶部的方法就写这里面。

/**
 * @监听屏幕滚动式时，是否显示返回顶部的按钮
 * @return  boolean  返回结果为布尔类型
 **/
export const startScroll = () =>

vue封装返回顶部组件cv可用(代码片段)

一、博主介绍💒首页:水香木鱼🛫专栏：后台管理系统✍简介:博主:花名“水香木鱼”，星座"水瓶座一枚"🔰格言:生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。🔋充... 查看详情

htmljquery的实现返回页面顶部组件(代码片段)

查看详情

原生js实现简洁的返回顶部组件

...看到，那只能是我这篇文章的荣幸，谢谢你的大驾光临~返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。实现思路也很容易，... 查看详情

js实现返回顶部功能的解决方案(代码片段)

很多网站上都有返回顶部的效果，主要有如下几种解决方案。1、纯js,无动画版本window.scrollTo(x-coord,y-coord);如：window.scrollTo(0,0);2、纯js，带动画版本生硬版：varscrollToTop=window.setInterval(function()varpos=wind 查看详情

js返回顶部效果

...浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击... 查看详情

html[返回顶部]下拉300px后，会出现按钮，点击返回顶部#javascript(代码片段)

查看详情

返回顶部(代码片段)

返回顶部也是一个常见的效果，主要是在浏览较长的网页是，方便用户快速的回到顶部。首先是一个有滚动效果的长网页<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*margin:0;padding:0;l... 查看详情

博客园-添加快速返回顶部的功能按键(代码片段)

添加快速返回顶部的功能按键，使其能够在文章任意文字快速返回文章顶部，把代码分别粘贴到“页面定制CSS代码”框和“页首Html代码”框，和上面一样修改代码，可以调整按键的位置，大小等，代码如下：　　页... 查看详情

模拟jd返回顶部功能(代码片段)

模拟JD返回顶部功能，添加在一定高度内隐藏功能。返回顶部的前端实现。涵盖的内容主要：前端样式（html排版），展示效果（CSS3动画），以及展示效果脚本的编写（javascript编写）HTML<!DOCTYPEhtml><html><headlang="en"><... 查看详情

html使用平滑滚动返回顶部(代码片段)

查看详情

java返回scrollview的顶部(代码片段)

查看详情

小火箭返回顶部(代码片段)

网页中常常会有一个返回顶部的功能，恰巧我这天写到了，在网上找了一下思路，下面就写了一个案例：效果预览：https://li_shang_shan.gitee.io/small_rocket_back_to_top。代码就直接粘贴了：<html><head><metacharset="utf-8"/><title&... 查看详情

vue-cli中跳转页面返回顶部(代码片段)

vue-cli中跳转页面返回顶部vue-cli中跳转页面返回顶部vue-cli中跳转页面返回顶部在router文件夹的index中写入以下代码即可JavaScriptconstrouter=newVueRouter(routes,//对于页面跳转，全部都返回到页面顶部。scrollBehavior(to,from,savedPosition)r... 查看详情

a超链接之返回顶部的两种实现方法(代码片段)

1.通过css实现：为页面顶部如body或者自己设置的盒子等加上唯一id属性<bodyid="id">....<ahref="#id">返回顶部</a>2.js实现通过设置标签滚动位置判断document.body.scrollTop=0;<!DOCTYPEhtml><htmllang="en"><head><metac 查看详情

javascript向下滚动时自动“返回顶部”链接(代码片段)

查看详情

vue封装回到顶部公共组件(动画过渡)-案例(代码片段)

演示Top.vue<template><divclass="goTop"v-show="goTopShow"@click="goTop"><imgsrc="./assets/im 查看详情

javascript返回顶部-使用es6类(代码片段)

查看详情

返回顶部实现方式(代码片段)

...条距离上方的距离，$(window).scrollTop(0)表示设置距离为0即返回顶部<head><metacharset="UTF-8"><title>console</title><scriptsrc="https://libs.baidu.com/jquery/2.1.4/jquery.js"></script><style>*margin:0;padding:0divheight:1000px;background:p... 查看详情