Jump to content
Search Community

Gsap smooth scroll link anchor problem

Sukru test
Moderator Tag

Recommended Posts

Hello Sukru,

 

when you are using some sort of smooth-scrolling either via the smoothScroll() helper function or just about any other library, browser-native smooth scrollTo will not work with it. In this case you can use GSAP's ScrollTo-Plugin.

 

For getting it to work you will have to prevent the default behaviour for every link, get where you want to scrollTo and add the tween for that. I should mention that I did that for absolutely every link in the demo to keep it simple. You are likely going to want to find out yourself, how you can only do it to links with the format href='#scrollToHere'.

 

Here's the demo. I hope it will help.

 

See the Pen abVeKwx by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, akapowl said:

Hello Sukru,

 

when you are using some sort of smooth-scrolling either via the smoothScroll() helper function or just about any other library, browser-native smooth scrollTo will not work with it. In this case you can use GSAP's ScrollTo-Plugin.

 

For getting it to work you will have to prevent the default behaviour for every link, get where you want to scrollTo and add the tween for that. I should mention that I did that for absolutely every link in the demo to keep it simple. You are likely going to want to find out yourself, how you can only do it to links with the format href='#scrollToHere'.

 

Here's the demo. I hope it will help.

 

 

 

Hello akapowl thank you very much :)

My code;

See the Pen MWONzKd by sukruemanet (@sukruemanet) on CodePen

I added the code you added as follows, but I think it didn't work in my project, I added it to the echo :(

 

 

//Your Code
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
const scrollToHere = link.getAttribute('href')
gsap.to(window, { duration: 2, scrollTo: scrollToHere });
 
})
});
//End
 
Link to comment
Share on other sites

For me it only doesn't work below 600px in your demo - and that appears to be the case, because you did not implement the changes to the CSS, that @OSUblake mentioned you would have to implement in the thread linked below

 

 

#viewport {
  height: 100%;
  width: 100%;
  overflow: visible;
}

#viewport.desktop {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

 

See the Pen ExbqGrR by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

Hello, actually what i want to do is why my codes don't run anchor. I am sharing the link with you. 

I want to go to the form in the most part here, but as i said the code does not work.

 

My codes,

gsap.registerPlugin(ScrollTrigger);
 
let viewport = document.querySelector("#viewport");
 
ScrollTrigger.matchMedia({
// large
"(min-width: 600px)": function () {
viewport.classList.add("desktop");
 
let smoother = smoothScroll("#content");
},
 
// small
"(max-width: 599px)": function () {
gsap.set(viewport, { clearProps: "all" });
viewport.classList.remove("desktop");
},
});
 
//Your Code
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
const scrollToHere = link.getAttribute('href')
gsap.to(window, { duration: 2, scrollTo: scrollToHere });
 
})
});
//End
 
// this is the helper function that sets it all up. Pass in the content <div> and then the wrapping viewport <div> (can be the elements or selector text). It also sets the default "scroller" to the content so you don't have to do that on all your ScrollTriggers.
function smoothScroll(content, viewport, smoothness) {
content = gsap.utils.toArray(content)[0];
smoothness = smoothness || 1;
 
gsap.set(viewport || content.parentNode, { overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0 });
gsap.set(content, { overflow: "visible", width: "100%" });
 
let getProp = gsap.getProperty(content),
setProp = gsap.quickSetter(content, "y", "px"),
setScroll = ScrollTrigger.getScrollFunc(window),
removeScroll = () => content.style.overflow = "visible",
killScrub = trigger => {
let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0]; // getTween() was added in 3.6.2
scrub && scrub.kill();
trigger.animation.progress(trigger.progress);
},
height, isProxyScrolling;
 
function refreshHeight() {
height = content.clientHeight;
content.style.overflow = "visible"
document.body.style.height = height + "px";
return height - document.documentElement.clientHeight;
}
 
ScrollTrigger.addEventListener("refresh", () => {
removeScroll();
requestAnimationFrame(removeScroll);
})
ScrollTrigger.defaults({ scroller: content });
ScrollTrigger.prototype.update = p => p; // works around an issue in ScrollTrigger 3.6.1 and earlier (fixed in 3.6.2, so this line could be deleted if you're using 3.6.2 or later)
 
ScrollTrigger.scrollerProxy(content, {
scrollTop(value) {
if (arguments.length) {
isProxyScrolling = true; // otherwise, if snapping was applied (or anything that attempted to SET the scroll proxy's scroll position), we'd set the scroll here which would then (on the next tick) update the content tween/ScrollTrigger which would try to smoothly animate to that new value, thus the scrub tween would impede the progress. So we use this flag to respond accordingly in the ScrollTrigger's onUpdate and effectively force the scrub to its end immediately.
setProp(-value);
setScroll(value);
return;
}
return -getProp("y");
},
scrollHeight: () => document.body.scrollHeight,
getBoundingClientRect() {
return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
}
});
 
return ScrollTrigger.create({
animation: gsap.fromTo(content, { y: 0 }, {
y: () => document.documentElement.clientHeight - height,
ease: "none",
onUpdate: ScrollTrigger.update
}),
scroller: window,
invalidateOnRefresh: true,
start: 0,
end: refreshHeight,
refreshPriority: -999,
scrub: smoothness,
onUpdate: self => {
if (isProxyScrolling) {
killScrub(self);
isProxyScrolling = false;
}
},
onRefresh: killScrub // when the screen resizes, we just want the animation to immediately go to the appropriate spot rather than animating there, so basically kill the scrub.
});
 
}
  screen.thumb.jpg.640bf312e20bc38ee45ae508a3b8cd44.jpg

 

I think im more descriptive now :), i want to go from here

Link to comment
Share on other sites

Well, on your website most links only point to index.html

 

Unbenannt.thumb.png.2373c8cc2f725d0207784a83d5a16480.png

 

And that section you mentioned doesn't have an ID. What you need to do is give the section you want to scroll to an ID and use href="#whateverIDyouChose" on your a element. Just like in the codepen demos above.

Link to comment
Share on other sites

Sorry, but debugging live websites is quite a bit out of scope of what these free support forums and their volunteering helpers can offer.

 

I took a quick look and I did not find the portion for the ScrollTo anywhere in your JS, and neither does it look like you are loading the ScrollTo Plugin.

 

So if you can not reproduce your issues in a minimal demo, I'm afraid I can not be of anymore help than that.

  • Like 2
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.
×
×
  • Create New...