Guide to seamlessly navigating to an element using a hash in NuxtJS

Question

Guide to seamlessly navigating to an element using a hash in NuxtJS

My aim is to create a smooth scrolling anchor link menu using Nuxt.js, where the user can click on a link and be directed to the corresponding page section. However, I'm facing a dilemma as there are multiple approaches to achieve this functionality, and I'm unsure which one is the most suitable.

Option 1:

In my first attempt, I implemented a menu that calculates the offsetTop of each section div to determine the scroll distance when a user clicks on a menu link. The issue with this method is that certain values of the divs, such as offsetHeight and offsetTop, tend to change when the project is deployed to the server. Consequently, the links end up scrolling to incorrect positions and do not function correctly.

I experimented with swapping the order of the 'Value' and 'Problem' sections, which temporarily resolved the problem. However, the correct sequence of sections needed to be maintained.

In this approach, I utilize the created() lifecycle hook to retrieve these values and store them in Vuex state. These values are then accessed in another component where the menu functionality resides:

.................................... (The rest of the original content remains unchanged) ..........................

Now, I find myself torn between these two options, unsure of where to invest my time and effort for the best outcome.

javascript vue.js nuxt.js vuex offsetheight

Answer 1

Answer №1

Your operations here are quite complex and may vary across different browsers. I suggest sticking with a Vue approach instead of vanilla JS for better compatibility.

I was able to implement a local scroll functionality following my previous answer and by adding the code in /pages/index.vue

<template>
  <div>
    <button
      v-scroll-to="{ el: '#scroll-here', duration: 300 }"
      @click="$router.push({ name: 'index', hash: '#scroll-here' })"
    >
      Let's scroll !!
    </button>
    <nuxt-link to="/about">go to about page</nuxt-link>

    <p class="big-block">
      (Content)
    </p>

    <p id="scroll-here">scroll smooth to here please</p>

    <p class="big-block">
      (More content)
    </p>
  </div>
</template>

<script>
export default {
  name: 'Index',
}
</script>

<style>
.big-block {
  min-height: 100vh;
}
</style>

We utilize vue-scrollto package to target our ID, all available options can be found here.

If you want a global behavior, check out my answer here with the code in /app/router.scrollBehavior.js

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (to.hash === '#scroll-here') {
        VueScrollTo.scrollTo('#scroll-here', 300, { easing: 'linear' })
      }
    }, 10)
  })
}

You can choose between a local solution per button or a more widespread global one based on your requirements.

You can view a demo of both local and global scrolling solutions here (reduce browser viewport size for best experience).
The related repository is hosted on GitHub here.

Answer 2

Your operations here are quite complex and may vary across different browsers. I suggest sticking with a Vue approach instead of vanilla JS for better compatibility.

I was able to implement a local scroll functionality following my previous answer and by adding the code in /pages/index.vue

<template>
  <div>
    <button
      v-scroll-to="{ el: '#scroll-here', duration: 300 }"
      @click="$router.push({ name: 'index', hash: '#scroll-here' })"
    >
      Let's scroll !!
    </button>
    <nuxt-link to="/about">go to about page</nuxt-link>

    <p class="big-block">
      (Content)
    </p>

    <p id="scroll-here">scroll smooth to here please</p>

    <p class="big-block">
      (More content)
    </p>
  </div>
</template>

<script>
export default {
  name: 'Index',
}
</script>

<style>
.big-block {
  min-height: 100vh;
}
</style>

We utilize vue-scrollto package to target our ID, all available options can be found here.

If you want a global behavior, check out my answer here with the code in /app/router.scrollBehavior.js

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (to.hash === '#scroll-here') {
        VueScrollTo.scrollTo('#scroll-here', 300, { easing: 'linear' })
      }
    }, 10)
  })
}

You can choose between a local solution per button or a more widespread global one based on your requirements.

You can view a demo of both local and global scrolling solutions here (reduce browser viewport size for best experience).
The related repository is hosted on GitHub here.

Answer 3

Answer №2

Defining what is considered "correct" in development can be a challenging task. In my opinion, the concept of "correct" revolves around functionality...

When deciding on which path to take, it's important to consider whether Vue.js tools are advanced enough for your specific needs. If they are primarily designed for simplifying complex processes, this might be causing issues with option 2. In such cases, it may be more effective to utilize CSS and vanilla JS to craft a refined solution rather than trying to force fit framework tools. Based on your description, it appears that solution 1, utilizing mostly vanilla JS, is performing better than solution 2. Remember, JavaScript is a fundamental skill possessed by all web developers. Therefore, if a problem can be elegantly solved using vanilla JS instead of within a particular framework like Vue, it may be wise to opt for the former.

Answer 4

Defining what is considered "correct" in development can be a challenging task. In my opinion, the concept of "correct" revolves around functionality...

When deciding on which path to take, it's important to consider whether Vue.js tools are advanced enough for your specific needs. If they are primarily designed for simplifying complex processes, this might be causing issues with option 2. In such cases, it may be more effective to utilize CSS and vanilla JS to craft a refined solution rather than trying to force fit framework tools. Based on your description, it appears that solution 1, utilizing mostly vanilla JS, is performing better than solution 2. Remember, JavaScript is a fundamental skill possessed by all web developers. Therefore, if a problem can be elegantly solved using vanilla JS instead of within a particular framework like Vue, it may be wise to opt for the former.

Guide to seamlessly navigating to an element using a hash in NuxtJS

Option 1:

Answer №1

Answer №2

Similar questions

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

Display modal within a React list

Having trouble with Node JS res.redirect() not functioning as desired?

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

Guide on integrating HTML from a response into the render function in React JS

Looking for a way to choose a button with a specific class name and a distinct "name" attribute using jquery?

Building a personalized version with core-js

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

Guide on excluding a specific element using an Xpath expression

Sending data between PHP and JavaScript using Ajax communication

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

Access various data from the local storage and display them inside a div container

Incorporating Font Awesome into a Vue.js project

Implementing the onClick function for the correct functionality in a ReactJS map component

How come React.js is not displaying images from local URLs?

Why is jQuery ajax not functioning in the view file in a node.js environment?

Having trouble uploading files with jQuery File Upload functionality

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Improving sharing functionality across multiple VuGen scripts executed through Performance Center