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

Difficulty encountered while deploying a React application on Netlify

Splitting Code in React Components using Webpack within a Ruby on Rails Application

Adding to object in an external JSON file using javascript

Retrieving data from MySQL through AJAX does not yield any information

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Is there a more efficient method for implementing server side rendering in a Next.js application?

What's the best way to mount multiple Vue Single File Components?

Prevent ESLint from linting files with non-standard extensions

"Encountered a problem when trying to access file with node

Skipping validation while navigating back on SmartWizardIf you need to bypass validation during backward

Ensuring that a service is completely initialized before Angular injects it into the system

Create custom AngularJS directives for validation and store them in a variable

Are 'const' and 'let' interchangeable in Typescript?

Solving required packages in Express server

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

What could be the reason for scope.$watch failing to function properly?

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

Troubleshooting resizing images in React using Material UI's useStyles

Packing third-party npm modules with Webpack for seamless integration

Learn the process of dynamically updating the source of an HTML5 video