# jQuery to Vanilla JS - Smooth scroll to #href

**URL:** <https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [March 10, 2019, 10:02pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052 "2019-03-10T22:02:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 10, 2019, 10:02pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/1 "2019-03-10T22:02:00Z")

</div>

I have this working exactly how I want in jQuery but can anyone convert this to vanilla JS for me and explain it a bit?

```auto
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
   var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    e.preventDefault(); 
    // top position relative to the document, offset by menuheight
    var pos = $id.offset().top-50;

    // animated top scrolling
    $('html').animate({scrollTop: pos});
});

```

Thank you

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 11, 2019, 4:06pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/2 "2019-03-11T16:06:11Z")

</div>

Still stuck on this, any suggestions?

---

<div class="post-metadata">

**Author:** ![ChrisCline1138](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chriscline1138/32/111745_2.png) [@ChrisCline1138](https://forum.freecodecamp.org/u/ChrisCline1138)\
**Post date:** [March 11, 2019, 4:38pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/3 "2019-03-11T16:38:35Z")

</div>

> [@AaronP](#):
>
> .animate

My understanding is that Jquery is a library of JS functions, the JS code is calling on one particular function called animate

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 11, 2019, 5:41pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/4 "2019-03-11T17:41:00Z")

</div>

Huh? I’m trying to get the vanilla javascript version of this jquery mate. I know what jquery does, sometimes using vanilla JS is a little bit more work but I want to move away from jQuery.

---

<div class="post-metadata">

**Author:** ![ChrisCline1138](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/chriscline1138/32/111745_2.png) [@ChrisCline1138](https://forum.freecodecamp.org/u/ChrisCline1138)\
**Post date:** [March 11, 2019, 7:25pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/5 "2019-03-11T19:25:14Z")

</div>

Can’t help you there, still grasping the basics of JS

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 11, 2019, 8:04pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/7 "2019-03-11T20:04:10Z")

</div>

> [@AaronP](#):
>
> $(document).on(‘click’, ‘a[href^=“#”]’

I started doing this and understand most of it except $(document).on(‘click’, ‘a[href^=“#”]’  
obviously its listening for a click on the document with an anchor where the href is #? But doesn’t seem to be a clear cut way of writing this is vanilla.

Ill continue to look 🙂

Looking into “matches” for the selector of the href with prop #

---

<div class="post-metadata">

**Author:** ![camperextraordinaire](https://avatars.discourse-cdn.com/v4/letter/c/5f9b8f/32.png) [@camperextraordinaire](https://forum.freecodecamp.org/u/camperextraordinaire)\
**Post date:** [March 11, 2019, 8:37pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/8 "2019-03-11T20:37:54Z")

</div>

I am not sure what you are trying to do with:

```auto
var $id = $(id);
if ($id.length === 0) {
  return;
}

```

but ignoring the case where the jQuery `on` method in itself is doing a lot of heavy-lifting for you (e.g you did not have to worry about new anchor elements being added dynamically), then you could do something like the following to replace the first part to get the id.

```auto
const anchors = document.querySelectorAll('a[href^="#"]');
anchors.forEach(function(anchor) {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    var id = this.getAttribute('href');
    console.log(id)
  });
});

```

---

<div class="post-metadata">

**Author:** ![AaronP](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/aaronp/32/112754_2.png) [@AaronP](https://forum.freecodecamp.org/u/AaronP)\
**Post date:** [March 11, 2019, 11:08pm UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/9 "2019-03-11T23:08:05Z")

</div>

Ah, this helps tremendously. I wasn’t using querySelectorAll, just querySelector… That solves it. Thanks!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 2, 2021, 11:13am UTC](https://forum.freecodecamp.org/t/jquery-to-vanilla-js-smooth-scroll-to-href/264052/10 "2021-02-02T11:13:10Z")

</div>