当前位置: 开发笔记 > 前端 > 正文

vue.js有无比较快捷的方法可以让当前界面滚动到某一部分。

作者：向着成功一直努力的人 | 来源：互联网 | 2023-07-16 16:02

比如常用的回到顶部，普通html页面可以通过给a标签的href属性设置为某个id，然后点击时就把滚动条滚动到了那一部分（当然，也可以直接设置滚动条距上的高度）。

而我目前有个需求是，在同一个vue组件中，点击不同的按钮，将滚动条滚动到对应的部分（可以不要滚动效果）。直接用上面提到的的话会触发页面跳转，而直接设置滚动条距上高度的话，又得逐个获取位置，没有前者来得简单。

求教大神，这个需求你们有无比较好的实现思路？

推荐阅读

npm
VueCLI多页分目录打包的步骤记录

本文介绍了使用VueCLI进行多页分目录打包的步骤，包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]

蜡笔小新 2023-12-11 16:14:11
html
用Vue实现的Demo商品管理效果图及实现代码

本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]

蜡笔小新 2023-12-10 15:14:25
button
【Vue基础】监听属性watch

Vue监听属性是watch，我们可以通过watch来响应数据的变化。代码示例： ... [详细]

蜡笔小新 2023-10-16 19:33:09
react
Vue 教程第一篇——基础概念

认识Vue关于Vue的描述有不少，不外乎都会拿来与Angular和React对比，同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多，但到目前为止，Angul ... [详细]

蜡笔小新 2023-10-16 17:12:49
hover
Vue案例（搜索页面）

<!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]

蜡笔小新 2023-10-16 06:20:19
html
利用defineProperty实现数据的双向绑定

vue.js如何实现数据的双向绑定呢？与angular不同。vue利用的是es5的defineproperty特性。1.一个小例子 ... [详细]

蜡笔小新 2023-10-15 16:30:40
css
Vue.Js_Vue之vue.js声明式渲染

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Vue之vue.js声明式渲染相关的知识，希望对你有一定的参考价值。ht ... [详细]

蜡笔小新 2023-10-15 10:01:48
button
Vue的组件化

文章目录Vue的组件化一、认识组件化1.什么是组件化2.组件化思想二、注册组件1.组件的使用步骤三、组件其他补充1.全局组件和局部组件2.父组件和子组件3.组件的语法糖写法4.组件 ... [详细]

蜡笔小新 2023-10-14 16:47:59
checkbox
【Vue】表单 input 绑定

网址：https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令，在 ... [详细]

蜡笔小新 2023-12-11 18:07:28
label
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

先看看ElementUI里关于el-table的template数据结构：<template><el-table:datatableData><e ... [详细]

蜡笔小新 2023-12-11 14:47:02
css
单页面应用 VS 多页面应用的区别和适用场景

本文主要介绍了单页面应用（SPA）和多页面应用（MPA）的区别和适用场景。单页面应用只有一个主页面，所有内容都包含在主页面中，页面切换快但需要做相关的调优；多页面应用有多个独立的页面，每个页面都要加载相关资源，页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]

蜡笔小新 2023-12-10 19:31:50
html
litemall源码阅读2.04管理后台前端litemalladmin之husky与lint

在package.json中有如下两个对象：husky:{hooks:{pre-commit:lint-staged}},lint-staged:{src** ... [详细]

蜡笔小新 2023-12-09 18:41:50
react
自学Vue的第01天，学习目标、学习资料和方法

本文介绍了自学Vue的第01天的内容，包括学习目标、学习资料的收集和学习方法的选择。作者解释了为什么要学习Vue以及选择Vue的原因，包括完善的中文文档、较低的学习曲线、使用人数众多等。作者还列举了自己选择的学习资料，包括全新vue2.5核心技术全方位讲解+实战精讲教程、全新vue2.5项目实战全家桶单页面仿京东电商等。最后，作者提出了学习方法，包括简单的入门课程和实战课程。 ... [详细]

蜡笔小新 2023-12-09 09:58:22
html
插槽及其使用方法详解

本文详细介绍了插槽的概念和使用方法，插槽是组件的一块HTML模板，父组件可以通过插槽来决定组件的显示和功能。文章中解释了插槽的两个核心问题：显示和怎样显示。同时还介绍了多个插槽和带name属性的插槽的定义方法。另外，还介绍了作用域插槽的使用，以及在插槽中传递父组件的对象值的方法。最后，还介绍了两种情况下的属性传值和模版重写的实现方式。 ... [详细]

蜡笔小新 2023-12-09 09:39:11
node.js
Django day32 跨域问题，创建vue项目，axios的使用

一：跨域问题1、同源策略(浏览器的安全策略)　　　　只允许当前页面朝当前域下发请求,如果向其他域发请求,请求可以正常发送,数据也可以拿回,但是被浏览器拦截了　　2、c ... [详细]

蜡笔小新 2023-10-17 16:32:38

向着成功一直努力的人

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章