Scroll To Top Button using Vanilla JS Issue

Question

I'm trying to create a Scroll To Top Button using Vanilla JS but I get some errors in my dev console.

I already have a jQuery code but I want to convert it to vanilla js

Uncaught TypeError: Cannot read property 'addEventListener' of null

Here is my Vanilla JS Code:

var backToTopBtn = document.getElementById("backToTopBtn");
backToTopBtn.addEventListener("click", function () {
   window.scrollTo({ top: 0, behavior: "smooth" });
});

Here is my jQuery Code:

var scrollTop = function (){
    'use strict';
    var scrollTop = jQuery("button.scroltop");
    /* page scroll top on click function */ 
    scrollTop.on('click',function() {
        jQuery("html, body").animate({
            scrollTop: 0
        }, 1000);
        return false;
    })

    jQuery(window).bind("scroll", function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll > 900) {
            jQuery("button.scroltop").fadeIn(1000);
        } else {
            jQuery("button.scroltop").fadeOut(1000);
        }
    });
}

HTML

<button type="button" class="scroltop"></button>

Your jQuery code `var scrollTop = jQuery("backToTopBtn");` is using an invalid selector. So I can hardly believe that's the exact code you used. And why than suddenly a bit later this `jQuery("button.scroltop")`? — Roko C. Buljan, May 10 '21 at 23:08
Than use `document.querySelector("backToTopBtn")` if you want to get that invalid element selector - which refers to the invalid element tag `` — Roko C. Buljan, May 10 '21 at 23:11
Your error means exactly as it reads: *"Uncaught TypeError: Cannot read property 'addEventListener' of null"* that means you're doing basically `undefined.addEventListener(`... which means either 1. you don't have any `#backToTopBtn`element. 2. you're not using your ` — Roko C. Buljan, May 10 '21 at 23:19
my vanilla js code for scroll to top button not completed I want to display the button only in specific size 350 — jhon-jhones, May 10 '21 at 23:22
Which means that the scrolling actually works? That's not possible if you got the error you said you got. Fix that error first as I explained. Use a proper ID. And make sure to place the ` — Roko C. Buljan, May 10 '21 at 23:23

score 0 · Answer 1 · answered May 10 '21 at 23:21

You are attempting to select an element in the document to add an event listener to it (document.getElementById("backToTopBtn")), but this element doesn't exist.

Add id="backToTopBtn" to your button.

var backToTopBtn = document.getElementById("backToTopBtn");
backToTopBtn.addEventListener("click", function() {
  window.scrollTo({
    top: 0,
    behavior: "smooth"
  });
});

.wrapper {
  height: 800px;
  position: relative;
}

#backToTopBtn {
  position: absolute;
  bottom: 0;
}

<div class="wrapper">
  <button type="button" class="scroltop" id="backToTopBtn">Top</button>
</div>

Scroll To Top Button using Vanilla JS Issue

1 Answers1