Scroll top undefined in shopify site

Question

I am working on an ecommerce store(shopify/liuquid).

I want to scroll smoothly to different hashs.

Now because this is a CMS, I have had to add some attributes via editor or manually with JS.

Here I give it the href

$(document).ready(function() {
    $(".hero__cta").addClass("scroll");
    $(".hero__cta").attr("href", "#section2")
});

If you go to the website, just under the main image, @the new entries@ title, has this is the markup:

<a id="section2"> </a>

And here is the JS function:

$(document).ready(function(){
    $("a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            $('html, body').animate({scrollTop: $(hash).offset().top}, 800,
                function() {                
                window.location.hash = hash;
                }
            );
        }
    });
});

So if you go to the site and click on the CTA button, it should scroll smoothly to that anchor. Works on a Codepen etc, but not on the Shopify platform.

I get :

Uncaught TypeError: Cannot read property 'top' of undefined at HTMLAnchorElement.

The site is live here:

https://www.toptrendshopping.com/

Oh and how and where do I add an IntersectionObserver polifill for this?

If you are trying to bind to dynamically created HTML elements with jquery you will want to use [this question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) as a reference. — MUlferts, Feb 01 '19 at 21:39
If I just do a console log on click, that works, but the property top is still not recognized — ptts, Feb 01 '19 at 21:50
Slightly confused as to why you're adding classes with jQuery? Why can't you just add it in the HTML? — Sam Johnson, Feb 04 '19 at 14:07
@SamJohnson I can see that you are familiar with the shopify API and Liquid. I have added the classes via Jquery because there was no easy way via the backend. And I did not want to go and change too much in teh template files(but will d o in the future). I would like to ask you something anyway, I want to add IDs to the dropdown menu, to get the same animated scrolling like on the CTA btn. If I change the URL in the backend, it does not work. (If you know what I mean). SO, how can I assign an ID to the dropdown LIs? The best I can think of is use queryselecor or css child ,then assign ID — ptts, Feb 05 '19 at 11:47
@Sam, if you could just message me here then we could have a look in chat at this. Cheers — ptts, Feb 05 '19 at 11:49
So you're changing the IDs in the theme files but it's not showing when you load the site up? — Sam Johnson, Feb 05 '19 at 12:06

score 0 · Answer 1 · answered Feb 05 '19 at 12:16

I have found a fix. As you can see, this works now on the live site.

$(document).ready(function(){
$(".hero__cta").attr("href", "#two");
$('a[href*="#"]')
// Remove links that don't actually link to anything
  .not('[href="#"]')
 .not('[href="#0"]')
 .click(function(event) {
    // On-page links
     if (
     location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
    && 
    location.hostname == this.hostname
     ) {
     // Figure out element to scroll to
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
     // Does a scroll target exist?
    if (target.length) {
     // Only prevent default if animation is actually gonna happen
      event.preventDefault();
     $('html, body').animate({
      scrollTop: target.offset().top
      }, 1000, function() {
      // Callback after animation
      // Must change focus!
       var $target = $(target);
       $target.focus();
       if ($target.is(":focus")) { // Checking if the target was focused
        return false;
      } else {
        $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
        $target.focus(); // Set focus again
       };
     });
    }
}

}); });

Found this on CSS tricks, still do not entirely why all this is required but work for now.

And a little extra, if you want to add a polyfill on a Shopify store, do it in the head section of the "theme.liquid" file.

Scroll top undefined in shopify site

1 Answers1