Jump to content
GreenSock

-o-o-o-o-

Reference ScrollSmoother object

Recommended Posts

Hi There,

I'm applying ScrollSmoother site-wide in my main.js (in the head of my HTML) by doing this:

 

var smoother = ScrollSmoother.create({
  smooth: 2,
  effects: true,
  normalizeScroll: true, //prevents overscrolling
});

Then on timeline.html i have specific code to create jump links that references the (which I thought was global) smoother var within a `<script></script>` just above my site footer:

 

//make scrollto buttons (jump links don't work otherwise)
[...document.querySelectorAll('#timeline-sub-nav a, a[data-jumplink]')].forEach(function(item) {
 
  
  item.addEventListener('click', function(e) {
    e.preventDefault();
    smoother.scrollTo(item.hash, false, "top -100px"); 
    smoother.scrollTo(item.hash, true); 

  });

I'm getting a ReferenceError: Can't find variable: smoother

 

This was working before when I had the ScrollSmoother only on this page

 

Also as an aside - it was my experience that hash/jumplinks (`site.html/#timeline1`) don't work with ScrollSmoother without using scrollTo - is that right?

 

Link to comment
Share on other sites

It's super tough to troubleshoot without a minimal demo - that error sounds like you must be declaring the "smoother" variable outside the scope of where your other code is trying to access it. As for scrolling to a particular thing, yes, just use the ScrollSmoother's .scrollTo() method for that. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×