Home Web Front-end JS Tutorial Example of vue2.0 simulated anchor point

Example of vue2.0 simulated anchor point

May 30, 2018 pm 01:53 PM
Example simulation

Below I will share with you an example of vue2.0 simulation anchor point, which has a good reference value and I hope it will be helpful to everyone.

In the vue project, due to the use of routing jumps, it will be impossible to use the regular a tag with the anchor function of the ID.

Solution:

<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(&#39;#anchor&#39;)"> 灰啊灰啊我的骄傲放纵</a>
Copy after login

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}
Copy after login

17. 9. 20 Update: The above has a BUG in FireFox, the fix is ​​as follows:

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}
Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue uses mixins to implement compressed image code

Vue project internationalization vue-i18n installation and use Tutorial

Broadcasting and receiving of Vue2.0 events (observer mode)

The above is the detailed content of Example of vue2.0 simulated anchor point. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SVM examples in Python SVM examples in Python Jun 11, 2023 pm 08:42 PM

Support Vector Machine (SVM) in Python is a powerful supervised learning algorithm that can be used to solve classification and regression problems. SVM performs well when dealing with high-dimensional data and non-linear problems, and is widely used in data mining, image classification, text classification, bioinformatics and other fields. In this article, we will introduce an example of using SVM for classification in Python. We will use the SVM model from the scikit-learn library

AI simulator takes the new SOTA in physics simulation! AI simulator takes the new SOTA in physics simulation! Feb 19, 2024 pm 06:50 PM

Machine learning makes computer graphics (CG) simulations more realistic! The method is called Neural Flow Maps (NFM), which can accurately simulate smoke with four vortices: more complex ones can also be easily realized: you know, in this era of AI applications flying all over the sky, CG physics simulation is still It is the world of traditional numerical algorithms. △NFM simulates "leapfrog". Although the application of neural networks in CG can create dazzling visual effects, it cannot strictly and robustly describe physical properties. △NFM simulates "ink droplets" It is precisely for this reason that physical simulation based on neural networks is still in the proof of concept stage, and the effects generated are far from SOTA. In order to solve this complex problem,

VUE3 Getting Started Example: Making a Simple Video Player VUE3 Getting Started Example: Making a Simple Video Player Jun 15, 2023 pm 09:42 PM

As the new generation of front-end frameworks continues to emerge, VUE3 is loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player. 1. Install VUE3 First, we need to install VUE3 locally. Open the command line tool and execute the following command: npminstallvue@next Then, create a new HTML file and introduce VUE3: &lt;!doctypehtml&gt;

Using Transformer as a general-purpose computer, it can also execute in-context learning algorithms. This research is very imaginative. Using Transformer as a general-purpose computer, it can also execute in-context learning algorithms. This research is very imaginative. Apr 13, 2023 am 11:31 AM

Transformer has become a popular choice for various machine learning tasks and has achieved great results, so how else can it be used? Researchers with great imagination actually want to use it to design programmable computers! The authors of this paper, titled "Looped Transformers as Programmable Computers", are from Princeton University and the University of Wisconsin, and aim to explore how to use Transformers to implement general-purpose computers. Specifically, the authors propose a framework for using transformer networks as general-purpose computers by programming them with specific weights and placing them in loops. in this framework

VAE algorithm example in Python VAE algorithm example in Python Jun 11, 2023 pm 07:58 PM

VAE is a generative model, its full name is VariationalAutoencoder, which is translated into Chinese as variational autoencoder. It is an unsupervised learning algorithm that can be used to generate new data, such as images, audio, text, etc. Compared with ordinary autoencoders, VAEs are more flexible and powerful and can generate more complex and realistic data. Python is one of the most widely used programming languages ​​and one of the main tools for deep learning. In Python, there are many excellent machine learning and deep

Learn best practice examples of pointer conversion in Golang Learn best practice examples of pointer conversion in Golang Feb 24, 2024 pm 03:51 PM

Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.

The relationship between the number of Oracle instances and database performance The relationship between the number of Oracle instances and database performance Mar 08, 2024 am 09:27 AM

The relationship between the number of Oracle instances and database performance Oracle database is one of the well-known relational database management systems in the industry and is widely used in enterprise-level data storage and management. In Oracle database, instance is a very important concept. Instance refers to the running environment of Oracle database in memory. Each instance has an independent memory structure and background process, which is used to process user requests and manage database operations. The number of instances has an important impact on the performance and stability of Oracle database.

Verification code usage examples in Gin framework Verification code usage examples in Gin framework Jun 23, 2023 am 08:10 AM

With the popularity of the Internet, verification codes have become a necessary process for login, registration, password retrieval and other operations. In the Gin framework, implementing the verification code function has become extremely simple. This article will introduce how to use a third-party library to implement the verification code function in the Gin framework, and provide sample code for readers' reference. 1. Install dependent libraries Before using the verification code, we need to install a third-party library goCaptcha. To install goCaptcha, you can use the goget command: $goget-ugithub

See all articles