What I need:
How to do it with a key is fine, but with mouse is preferable. I need the website to scroll through itself while the mouse or key is down, and once released the site goes all they way back to the top. but if it reaches the Final section, the key/mouse down will no longer work.
What I have:
So the site is using gsap and scrolltriggers. I have touchable opacity :
HTML:
<a href="#top" class="touchableOpacity" id="TO"></a>
JS:
$("a[href='#top']").mouseup(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
tls8In
.to("#TO",{top: -2000, duration:0.1})
It takes to top on mouse up and it is removed from viewport when the final section is entered. '''
Hi! Try this code above. This code adds functionality to scroll html tag to element, which id is set in href attribute.
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
let target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({ // which elements should be scrolled
scrollTop: target.offset().top
}, 1000); // animation time
return false;
}
}
});