·

Vue - Go to anchor smoothly without changing url

Published at 2024-04-30 16:52:12Viewed 289 times
Professional article
Please reprint with source link

In Vue.js, we can define an anchor by RouterLink or HTML tag <a> , while in Nuxt.js, we can additionally use NuxtLink which is similar to RouterLink .

<a href="#content">My Link</a>
<RouterLink to="#content">My Link</RouterLink>
<NuxtLink to="#content">My Link</NuxtLink>

However, on loading a page, the above ways would change the url which makes it slow to go to #content . To speed up anchor link and not change the url, there are two ways.

The first way is to use pure javascript method scrollIntoView to scroll to the specified div id, which is fast and would not change url.

function scrollSmoothTo(Id) {
  var node = document.getElementById(Id);
  node.scrollIntoView({

    behavior: 'smooth'
  });
}

<a @click="scrollSmoothTo('content')">
  Scroll to userdiv
</a>
<RouterLink @click="scrollSmoothTo('content')">
  Scroll to userdiv
</RouterLink>
<NuxtLink @click="scrollSmoothTo('content')">
  Scroll to userdiv
</NuxtLink>
<div id="content">
   example
</div>

Note that adding behavior: 'smooth' can add animation when scrolling. However, using this way, a could not have attribute href, i.e.

<a href="#content" @click="scrollSmoothTo('content')" />
<RouterLink  href="#content" @click="scrollSmoothTo('content')" />
<NuxtLink href="#content" @click="scrollSmoothTo('content')" />

would not perform the click event. This is not SEO friendly.

Therefore, the second way is the improvement of the first that is SEO friendly, which can smoothly go to #content without changing the url. We should use Vue's event modifiers for v-on.

<a href="#content" @click.native.prevent="scrollSmoothTo('content')">
  Scroll to userdiv
</a>
<div id="content">
   example
</div>

This way, we could prevent the default href action when clicking and perform the scrollSmoothTo function. However, It seems that using RouterLink or NuxtLink in the same way could not prevent the default action, i.e.

<RouterLink href="#content" @click.native.prevent="scrollSmoothTo('content')">
  Scroll to userdiv
</RouterLink>
<NuxtLink href="#content" @click.native.prevent="scrollSmoothTo('content')">
  Scroll to userdiv
</NuxtLink>

not work.

0 人喜欢

Comments

There is no comment, let's add the first one.

弦圈热门内容

Django change an existing field to foreign key

I have a Django model that used to look like this:class Car(models.Model): manufacturer_id = models.IntegerField()There is another model called Manufacturer that the id field refers to. However, I realized that it would be useful to use Django's built-in foreign key functionality, so I changed the model to this:class Car(models.Model): manufacturer = models.ForeignKey(Manufacturer)This change appears to work fine immediately, queries work without errors, but when I try to run migrations, Django outputs the following:- Remove field manufacturer_id from car - Add field manufacturer to carDoing this migration would clear all the existing relationships in the database, so I don't want to do that. I don't really want any migrations at all, since queries like Car.objects.get(manufacturer__name="Toyota") work fine. I would like a proper database foreign key constraint, but it's not a high priority.So my question is this: Is there a way to make a migration or something else that allows me to convert an existing field to a foreign key? I cannot use --fake since I need to reliably work across dev, prod, and my coworkers' computers.内容来源于 Stack Overflow, 遵循 CCBY-SA 4.0 许可协议进行翻译与使用。原文链接:Django change an existing field to foreign key

Get connected with us on social networks! Twitter

©2024 Guangzhou Sinephony Technology Co., Ltd All Rights Reserved