Scroll to ID using javascript

Question

How would one scroll to an element in a webpage using javascript? I want to basically create the same thing that happens when using <a href="#link"></a> but in javascript using a function. I do not want to use any jQuery, I'm currently using VueJS with the Vuetify framework. My navigation looks like this:

<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>

As you can see, I have a @click property already set up, but I have no idea how to actually scroll to an ID link like #info or #contact

You can use scrollTo

VLAZ
– VLAZ

2018-09-26 04:38:19 +00:00
Commented Sep 26, 2018 at 4:38 — VLAZ
– VLAZ, Commented Sep 26, 2018 at 4:38

Sarath Mohan · Accepted Answer · 2018-09-26 04:54:05Z

1

document.getElementById('idhere').scrollIntoView();

answered Sep 26, 2018 at 4:54

Sarath Mohan

1671 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fabrik Over a year ago

Could you please add some details to your answer?

Sarath Mohan Over a year ago

suppose you having a div as below <div id="div1">Scroll to here </div> and a button <button onclick="scrollTo()">

Sarath Mohan Over a year ago

The scrollTo() will have document.getElementById('div1').scrollIntoView(); This is pure js

Husam Elbashir · Accepted Answer · 2018-09-26 08:35:08Z

1

I would be careful using scrollIntoView as it doesn't work on all browsers. From the MDN web docs..

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

I suggest using a lightweight scroll script such as smooth-scroll

answered Sep 26, 2018 at 8:35

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Comments

itodd · Accepted Answer · 2018-09-26 04:46:46Z

0

If you have the element you can use scrollIntoView. With scrollIntoViewOptions it allows a smooth scroll too.

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

It should be noted however, that as you are replicating default behaviour it is always advisable to use native elements and default behaviour when ever possible for accessibility proposes. This provides interactions that are known and expected by the user, as with custom implementations often certain benefits are lost, e.g. keyboard interaction or screen reader quick actions

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

edited Sep 26, 2018 at 4:46

answered Sep 26, 2018 at 4:39

itodd

2,4031 gold badge15 silver badges14 bronze badges

Collectives™ on Stack Overflow

Scroll to ID using javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related