JS: Move to next section class

[Russinating]

I'm working on a site that uses full height sections. I don't like some of the plugins you can get that override normal scrolling but I would like a fixed down arrow that allows you to move down to the next section.

This script works, but only for the first section:

$("#move-down").click(function() {
		var cls = $(this).closest(".section-full").next().offset().top;
		$("html, body").animate({scrollTop: cls}, "slow");
	});

Is there a way of a similar script allowing the page to scroll to the next .section-full, rather than just the first/top one?

 

[Dj_Jestar]

Personally I would try and use native scrolling to avoid unnecessary jQ.

However here's a link with both native and jQ smooth scrolling: https://css-tricks.com/snippets/jquery/smooth-scrolling/

Some small changes will easily adapt that to a fixed control.

 

[GravyMonster]

That jQuery code only works for the first element as you're selecting by id, '#move-down', and id attributes must be unique within the DOM, ie. not repeated. Change that selector to work with a common class and it should work fine for all instances.

 

[touch]

That jQuery code only works for the first element as you're selecting by id, '#move-down', and id attributes must be unique within the DOM, ie. not repeated. Change that selector to work with a common class and it should work fine for all instances.

Presumably the #move-down item is a fixed-location button which scrolls down the screen with the user scrolling, so it should be fine to address that by id.
When you use: $(this).closest(".section-full") it's finding the closest item in the html tree, not by distance on screen. You can have some css to make the button scroll down the screen with you but the actual html code for the button always remains in the same place (so you always get the same result when you click it).

You could add a class to the section when you scroll to it to indicate which is the current section then scroll to the next one when the button is clicked (you'd also need some code to update the current section if other scroll methods are used).

I'd agree with @Dj_Jestar here though, it's best to use native scrolling wherever possible. It's also probably bad UX because most sites use this type of setup as a 'return-to-top' button rather than a scroll down button. It doesn't make your site stand out by doing interactions differently, it just annoys your users.

 

[GravyMonster]

Yes, you're right. I misunderstood the OP's intention. Given the logic I assumed there was going to be one button per section. If you're going to have one button for all sections then you'll need to figure out which section is currently being viewed and then traverse the DOM to find the next one.

 

[Russinating]

Thanks all, that helps. I've actually fallen back to Scrollify which actually works quite nicely with a stripped down site layout.