1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

JS: Move to next section class

Discussion in 'HTML, Graphics & Programming' started by Russinating, Oct 8, 2018.

  1. Russinating

    Capodecina

    Joined: Dec 27, 2005

    Posts: 14,777

    Location: Bristol

    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:

    Code:
    $("#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?
     
  2. Dj_Jestar

    Caporegime

    Joined: Oct 18, 2002

    Posts: 28,283

    Location: Back in East London

  3. Spunkey

    Capodecina

    Joined: Oct 18, 2002

    Posts: 13,407

    Location: The land of milk & beans

    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.
     
  4. touch

    Capodecina

    Joined: Oct 28, 2006

    Posts: 10,531

    Location: Sufferlandria

    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.
     
  5. Spunkey

    Capodecina

    Joined: Oct 18, 2002

    Posts: 13,407

    Location: The land of milk & beans

    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.
     
  6. Russinating

    Capodecina

    Joined: Dec 27, 2005

    Posts: 14,777

    Location: Bristol

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