‘backBox'是外层容器类名, 根据传入的index,定位在不同的位置

组件:

<template>
<div class="toTop" @click="getActiveClass(0)">
<img src="@/assets/images/up01.png" alt="">
</div>
</template> <script>
export default {
methods: {
getActiveClass(index) {
let jump = document.querySelectorAll('.backBox')
jump[index].scrollIntoView({ block: 'start', behavior: 'smooth' })
}
}
}
</script> <style lang="less" scoped>
.toTop {
position: fixed;
bottom: 60px;
right: 20px;
width:48px;
height:48px;
img {
width: 48px;
height: 48px;
}
}
</style>

vue项目 回到顶部功能 定位在头部的更多相关文章

  1. Vue.之.回到顶部

    Vue.之.回到顶部 当页面出现上下滚动条时,页面右下角出现回到顶部功能. 在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏.点击DIV快速回到顶 ...

  2. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  3. jQuerry点击按钮回到顶部功能

    简单实现点击按钮回到顶部功能

  4. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  5. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  6. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  7. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

  8. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  9. jQuery实现页面回到顶部功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. vue开发 回到顶部操作

    第一种:使用vue-router history 模式下,用scrollBehavior 方法实现. 1 export default new Router({ 2 mode: 'history', ...

随机推荐

  1. golang http client 长连接vs短连接基准测试

    package main import ( "io/ioutil" "net/http" "strings" "testing&q ...

  2. 来自多彩世界的控制台——C#控制台输出彩色字符画

    引言 看到酷安上有这样一个活动,萌生了用 C# 生成字符画的想法,先放出原图.   酷安手绘牛啤     §1 黑白 将图像转换成字符画在 C# 中很简单,思路大致如下: 加载图像,逐像素提取明度. ...

  3. 使用node压缩js

    先下载并安装Node 安装完成后打开cmd运行:node -v 运行:npm -v 确定node安装成功,然后安装uglifyjs,打开cmd输入下面命令: npm install uglify-js ...

  4. MR+meta分析的摘录

    第四篇公众号:来自微信 天桥下的卖艺者 零基础说科研,仅为个人学习用,如有侵权,可以删除 吸烟没什么创意,唯一的创意就是加入了MR和meta分析,作者显示介绍吸烟与多种疾病之间的因果关系扔不明确, 第 ...

  5. EndNote里参考文献的期刊名显示错误怎么办?

      本文介绍EndNote文献管理软件导入文献引用时,期刊名称带有%J前缀从而不能正常显示的解决方法.   前期的文章中,我们多次介绍了文献管理软件EndNote的具体使用方法与技巧.而在使用EndN ...

  6. Linux扩展篇-shell编程(五)-流程控制(二)-case语句

    基本语法: case expression in pattern1) statement1 ;; pattern2) statement2 ;; *) statement3 ;; esac 注意事项: ...

  7. UDP 发送两遍对比一致能绝对判定发送过程成功传递完整数据吗

    UDP 发送两边对比一致,能确定数据传输无错误吗 对比两条相同数据的MD5 这样做可行吗

  8. C#.NET 微信上传电子小票

    HttpWebRequest 时,不认图片的Content-Type.Content-Type 实际是有传的. 报错内容:{"code":"PARAM_ERROR&quo ...

  9. 透过 node-exporter 彻底弄懂机器监控:01. node-exporter 框架讲解

    前言 Prometheus 生态里有很多采集器负责各类监控数据的采集,其中使用最广泛的,显然是 node-exporter,负责 Linux.BSD 等系统的常规监控指标的采集,比如 CPU.内存.硬 ...

  10. 夜莺监控 V7 第二个 beta 版本发布,内置集成故障自愈能力,简化部署

    经过一个半月的打磨改进,夜莺监控 V7 第二个 beta 版本发布了,本次发布的主要亮点是内置集成故障自愈能力,简化架构,同时做了其他 19 项改进.一些重要的改进如下: feat: 集成故障自愈的能 ...