0

I have 2 divs. One that contains an upper section of the page. And another directly below the top div. This second div is about 1.5 viewports down the page. But when i try and make the page scroll to the second div when a navigation button is pressed. It takes me to the top of the page. Even though it is referencing the scrollTop attribute of the second div.

Adam Cole
  • 49
  • 2
  • 7
  • https://gyazo.com/b6cf7f9621d29a7620a6fbcfcea06a1f this is a screenshot of the developer tools. It says the div has a scrollTop of 0 even though it isnt at the top of the page... – Adam Cole Jun 09 '17 at 18:18
  • Possible duplicate of [$(document).scrollTop() always returns 0](https://stackoverflow.com/questions/12788487/document-scrolltop-always-returns-0) – apires Jun 09 '17 at 18:18
  • https://gyazo.com/b6935f99b658c96e54f30df80faeefbc this is a gif of me hovering over parallax2, which is the "second div" that i talked about. As you can see, it is not at the top of the page, and therefore should not have a scrollTop of 0. – Adam Cole Jun 09 '17 at 18:21
  • Use top, scrolltop is i think with reference to the div itself, which can have scrollbars. – inarilo Jun 09 '17 at 18:23

1 Answers1

0

scrollTop will always equate to position 0. If you want to scroll to a different div, then you need to use offset and scroll to the hash position. If you are using Bootstrap, you can employ ScrollSpy for that. If not, then you can use this code to handle smooth scrolling to the hash position.

In your case, the hash should be the ID of the div - which you will target by setting the a href on your button/link to match the ID of the div you want the button/link to scroll to.

So, your link may look like this:

 <a href="#somediv">Some Link</a>

And your div may look like this:

 <div class="someclass" id="somediv"></div>

And this JS will handle the scrolling to the correct position:

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top -80
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
Korgrue
  • 3,430
  • 1
  • 13
  • 20