Dynamically change href based on scroll position

Question

I'm trying to change the href of a "next" button so that clicking it will continually move the user down the blog page to the next anchor. Since the user can scroll down without using the next button, the href needs to change whenever an anchor is scrolled past. The button is positioned fixed relative to the window and thus stays visible.

What's frustrating is that I receive an inconsistent result - the first time down the page, the link updates to #post-1 and #post-2, but post-2 does not seem to update the href to #post-3. Then post-3 updates the href to #post-4 (which doesn't exist but that's beside the point for the moment.) But then when scrolling back up from the bottom, post-2 suddenly works while others don't. Here's my relevant code:

HTML:

<span id="post-0" class="anchor"></span>
  <div class="row blog-page">
    <a href="#post-1" id="blog-next">
      <i class="blog-arrow fa fa-chevron-down"></i>
    </a>
  </div>

<span id="post-1" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>

<span id="post-2" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>    

<span id="post-3" class="anchor"></span>
  <div class="row blog-page">
    <h3>header</h3>
  </div>

JS:

<script type="text/javascript">
   $(document).ready(function(){
      $(function () {
        var nextHash = 0;
           $(document).scroll(function () {
              $('.anchor').each(function () {
                 var top = window.scrollY;
                 var distance = top - $(this).offset().top;
                 var hash = parseInt($(this).attr('id').slice(5));

                 if (distance < 30 && distance > -30 && nextHash != hash) {
                    nextHash = hash + 1;
                    document.getElementById('blog-next').setAttribute('href', '#post-' + nextHash);
                 }
              });
           });
       });
   });
</script>

You can see my live code here (it's the down arrow in the bottom right corner): www.zaplings.com/blog

Thank you for your help.

Be CAREFUL with event handlers on the `scroll` event. The event fires a LOT and can destroy performance on a page. See http://ejohn.org/blog/learning-from-twitter/ — Chad Killingsworth, Apr 03 '15 at 15:32
Thanks @ChadKillingsworth I've done away with the scroll event. — dannypernik, Apr 03 '15 at 20:53

score 1 · Accepted Answer · answered Apr 03 '15 at 16:55

1

Use a library like waypoints.

Then you will not need to worry about distances, and scrolling and so on, just about the callback.

answered Apr 03 '15 at 16:55

Peter Uhnak

8,134
4
33
46

Hooray! Thank you for passing this along. – dannypernik Apr 03 '15 at 20:50

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I think your distance variable is falling outside of the -30 < x < 30 range when you're scrolling, so you're missing your trigger points.

Check this out: Check if element is visible after scrolling

You can use that "isScrolledIntoView" function, then use jquery to select the next sibling of the current scrolled into view element. Then, change your anchor to link to that.

edited May 23 '17 at 11:50

Community

1
1

answered Apr 03 '15 at 16:10

wholevinski

2,978
13
19

Thank you for your response, looks like waypoints is way to go to avoid performance issues. – dannypernik Apr 03 '15 at 20:55

dannypernik · Answer 3 · 2015-04-03T21:29:51.507

Here's my solution using Waypoints, in case anyone else has this issue.

        $(document).ready(function(){

            $('.anchor').each(function () {
                new Waypoint({
                    element: this,
                    handler: function(direction) {

                        var previousWaypoint = this.previous();
                        var nextWaypoint = this.next();

                        if (this != this.group.last()){
                            document.getElementById('blog-next').setAttribute('href','#' + nextWaypoint.element.id)
                            $('#blog-next').show();
                        } else {
                            $('#blog-next').hide();
                        };
                    }
                })
            })
         });

Dynamically change href based on scroll position

3 Answers3