Scroll snap, but with anchor marks on the page
I am trying to set the scrolling in place. What I'm trying to achieve can be seen here: http://alvarotrigo.com/fullPage . So when the user starts scrolling, they are immediately intercepted and the page is scrolled to the next section.
I cannot use the plugin given in this link because they are using a div with a class section
, but I cannot edit this type of html elements.
I prefer to use id
in the anchor tags on the page. So when the user starts scrolling up / down, I need to detect the previous / next anchor and scroll through it.
As shown in the demo link above, when scrolling (mouse) (up or down) starts, nothing can stop it ... until it stops. Then another scroll may appear again.
I can easily detect mouse scrolling up or down by the following code:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
console.log('down');
} else {
// upscroll code
console.log('up');
}
lastScrollTop = st;
});
I can also detect if scrolling is done like this:
$(window).scroll(function(event){
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
// do something
console.log("Haven't scrolled in 250ms!");
}, 250));
});
Now I need to really scroll to the next / previous anchor (thanks scrollTop )
My jsFiddle: http://jsfiddle.net/f38fmsw9/1/
Open your console and check messages when scrolling up / down / stopping.
Thanks so much for pointing me in the right direction.
source to share
I cannot use the plugin given in this link because they are using a div with a section class, but I cannot edit this type of html elements.
Why don't you use the fullpage.js parameter sectionSelector
to change this and use any other selector?
$('#fullpage').fullpage({
sectionSelector: '.mySelector'
});
Then in HTML
<div id="fullpage">
<div class="mySelector">Section 1</div>
<div class="mySelector">Section 2</div>
<div class="mySelector">Section 3</div>
</div>
You can even use things like, for example, if you don't have a common class for all sections:
sectionSelector: '#fullpage>div'
Any valid jQuery selector will be allowed.
I prefer to use id on anchor tags on the page. So when the user starts scrolling up / down I need to define the previous / next anchor and highlight it.
I would say that using the elements id
will probably be quite tricky, as the site will scroll to the given ID before you can even control the animation. This is a browser function.
source to share