How can I scroll to some specific place/ID with JavaScript?

Question

I'm trying to autoscroll to some specific place/ID without JQuery. Now I have this block of code with JQuery, this send me to a specific ID with autoscroll.

$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 900, 'linear');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>
<div id="one"></div>

And I'm looking to do some similar effect but with JavaScript, any idea?

Possible duplicate of [Scroll Automatically to the Bottom of the Page](https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) — Muhammad Omer Aslam, Jun 13 '18 at 00:51
Hmm I'm looking to make autoscroll to a specific ID `
` without Jquery, just **JS** — Sr Jefers, Jun 13 '18 at 02:55

Muhammad Omer Aslam · Accepted Answer · 2018-06-13T02:59:38.797

This is the best you can do for a start when using javascript only to scroll with a smooth effect using window.scroll and element.getBoundingClientRect().top, see a demo below

#one {
  margin-top: 1000px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>

<div id="one">down-here</div>

<script type="text/javascript">
  (function() {
    let anchors = document.querySelectorAll('a[href*="#"]');

    anchors.forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        let id = this.getAttribute("href");
        let targetElement = document.querySelector(id)
        let scrollHeight = targetElement.getBoundingClientRect().top + window.scrollY;

        //scroll with smoooth effect
        window.scroll({
          top: scrollHeight,
          behavior: 'smooth'
        });
      });

    })

  })();
</script>

Oh no! How can do it but just with **JavaScript** but without Jquery :( — Sr Jefers, Jun 13 '18 at 02:46
the scroll already uses javascript there isnt any jquery , the only jquery thing is the `.on('click',function())`you can replace it by `addEventListener('click', function(e) {` i have updated the code, check again and mark the answer as correct if it works for you @SrJefers — Muhammad Omer Aslam, Jun 13 '18 at 03:00

How can I scroll to some specific place/ID with JavaScript?

1 Answers1