Navigate to an element with a specific ID using JavaScript

How can I implement scrolling to an element on a webpage using pure javascript in VueJS with Vuetify framework? I want to achieve the same functionality as <a href="#link"></a> but without using jQuery. My navigation structure is as follows:

<v-navigation-drawer
  persistent
  :mini-variant="miniVariant"
  :clipped="clipped"
  v-model="drawer"
  enable-resize-watcher
  fixed
  app
>
  <v-list>
    <v-list-tile
      value="true"
      v-for="(item, i) in items"
      :key="i"
      @click="navigate(item.link)"
    >
      <v-list-tile-action>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-tile-action>

      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>
  </v-list>
</v-navigation-drawer>

I have already set up the @click property, but I am unsure how to scroll to an ID link like #info or #contact

Answer №1

Use the JavaScript code document.getElementById('idhere').scrollIntoView(); to scroll to a specific element on the page.

Answer №2

When it comes to using scrollIntoView, caution is advised as it may not function properly on all browsers, according to Mozilla Developer Network. Here's what they have to say about it:

This is an experimental technology Check the Browser compatibility table carefully before using this in production.

To ensure smooth scrolling across all platforms, it is recommended to utilize a lightweight scroll script like smooth-scroll

Answer №3

If you have an element and want to scroll to it, you can utilize scrollIntoView. Adding scrollIntoViewOptions allows for a smooth scrolling experience.

For example:

document.querySelector(item.link).scrollIntoView();

However, it's important to note that replicating default behavior is recommended whenever possible for accessibility purposes. Using native elements and default actions provides familiar interactions for users, ensuring expected outcomes such as keyboard navigation or screen reader support.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bidirectional updates in AngularJS with CSS styling

On the backend, certain HTML elements store their position and size persistently and retrieve them when the page loads. These elements can be dragged and resized by users, with any updates needing to be saved on the backend for consistency across sessions. ...

Using Angular's ng-repeat prefilter with JavaScript

Is it possible to achieve the functionality of this angular js filter ng-repeat on a tr element using pure javascript? Could it be done in just one custom filter? Please note that showRow is a function that returns a boolean value, and searchString is a s ...

Redux Persist causes the redux state to become undefined

I recently added redux-persist to my project and now I am facing an issue where all of my Redux states are returning undefined. Previously, all the Redux states were functioning properly. However, after incorporating redux-persist, they are no longer work ...

One class seems to be causing issues with hover functionality while the other works perfectly fine

HTML: <div class="channellist"></div> Through the use of Ajax, I am able to dynamically retrieve channels when the page loads and then append them within the channellist container. Once appended, my HTML structure appears as follows: <div ...

Instructions for applying a specific style to TextFields using a theme provider

Custom transitions and colors have been added to the textfields using the makeStyles hook in the component. The issue lies in needing to define these customs every time they are used in a component. There is a desire to establish them in the theme provid ...

Transfer information to an ExpressJS server in order to display a fresh view

I'm struggling to figure out how to transfer data from the client side to an ExpressJS server in order to generate a view based on that information. When users choose different parameters on the client side, they update the 'data-preference&apos ...

The deep nested route's URL may change, but its view remains constant

Latest Update: The URL in the address bar changes, but the content on the page remains the same. I recently started learning Vue.js and I'm currently experiencing an issue with deep nested routes. Whenever I try to access a deep nested route, I encou ...

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Looking to connect several points with a curve rather than just a straight line. I attempted using the lineTo() and bezierCurveTo() methods to draw the points. Is there anyone who can assist me in solving this dilemma? Perhaps there is a different approac ...

The @click function does not function properly when employing runtimeConfig in Nuxt 3

Here is a demonstration I created: https://stackblitz.com/edit/github-jsuxnz-rst5gg-git?file=app.vue Initially, the @click function works fine until I introduce runtimeConfig with const config = useRuntimeConfig();, after which all events cease to work. ...

Is there a discrepancy in performance when running a function on an individual element versus a group of elements within jQuery?

Imagine having the choice between applying a function to an individual DOM element or a list of them: For Individual Elements: $('#element1').click(function () { $(this).hide(); return false; }); $('#element2').click(functi ...

The scroll function is executed only one time

I'm currently working on implementing a sticky sidebar snippet using jQuery. However, I am facing an issue where the function within .scroll() is only executing once instead of on every scroll event. Can anyone help me identify what I might be doing i ...

`Toggling between Vue components using buttons`

I am attempting to switch between two vue components using the following code: <template> <button @click="selected = 'A', console.log(selected)">A</button> <button @click="selected = 'B', cons ...

Exploring Laravel 4: Controlling AJAX data manipulation via the controller

I am a beginner in using Laravel and ajax. Currently, I am working on retrieving data from a form through ajax and calling a controller method using ajax as well. The controller method searches the database and returns a json response to be handled by ajax ...

Unexpected behavior observed with Async/Await

I am currently learning how to use Async/Await, which is supposed to wait until the Await function finishes executing before moving on with the code. However, I have encountered an issue where my code stops completely after using Await. Here is the method ...

Refreshing a data object that is shared among Vue components

I've recently started diving into Vue, and I've found myself responsible for tweaking an existing codebase. There's this data.js file that caught my attention, containing a handful of objects holding city information, like: export default { ...

Encountering a call stack size error when utilizing Vue-Resource within a Vuex store

I'm struggling to integrate an array from my api into a component using Vuex. The code I had when accessing the api directly from the component worked fine: data () { return { catalog:[], } }, created() { this.$http.get('https://example.net ...

What is the technique for accessing dynamic object properties in Javascript?

I am dealing with a dynamic object where the property values change based on different data sets. For example: MyObj = { country:"Ind", Place:"Pune"} Now, I have a data value that determines which property value I need to retrieve. var MyArr = this.Filt ...

What is the purpose of assigning controller variables to "this" in AngularJS?

Currently, I am analyzing an example in CodeSchool's "Staying Sharp with Angular" course in section 1.5. Here is the code snippet: angular.module('NoteWrangler') .controller('NotesIndexController', function($http) { var contro ...

Determine in React whether a JSX Element is a descendant of a specific class

I am currently working with TypeScript and need to determine if a JSX.Element instance is a subclass of another React component. For instance, if I have a Vehicle component and a Car component that extends it, then when given a JSX.Element generated from ...

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

I've implemented a feature that resizes the font size within a text area based on the selected font size. It was functioning flawlessly... until I decided to place the font size selection in a drop-down menu, which caused the feature to stop working. ...