Scrolling script implementation doesn't work

Question

I'm trying to implement the code of this fiddle: https://jsfiddle.net/h7818era/

HTML --------------------------------------------------------------------

<div class="da">
    <a href="#diva" class="current">DIV1</a>
    <a href="#divb">DIV2</a>
    <a href="#divc">DIV3</a>
    <a href="#divd">DIV4</a>
</div>
<div class="db">
    <div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a></div>
    <div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a></div>
    <div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a></div>
    <div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a></div>
</div>




JS --------------------------------------------------------------------

    var topRange      = 200,  // measure from the top of the viewport to X pixels down
     edgeMargin    = 20,   // margin above the top or margin from the end of the page
     animationTime = 1200, // time in milliseconds
     contentTop = [];

$(document).ready(function(){
 // Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
  if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
    $('html,body').stop();
  }
})

 // Set up content an array of locations
$('.da').find('a').each(function(){
  contentTop.push( $( $(this).attr('href') ).offset().top );
})

 // Animate menu scroll to content
$('.da').find('a').click(function(){
  var sel = this,
  newTop = Math.min( contentTop[ $('.da a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
  $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
    window.location.hash = $(sel).attr('href');
  });
  return false;
})

 // adjust side menu
$(window).scroll(function(){
  var winTop = $(window).scrollTop(),
  bodyHt = $(document).height(),
  vpHt = $(window).height() + edgeMargin;  // viewport height + margin
  $.each( contentTop, function(i,loc){
    if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
      $('.da a').removeClass('current').eq(i).addClass('current');
    }
  })
})

});




CSS --------------------------------------------------------------------

    .da{
  position:fixed;
  z-index: 2;
}
.da .current,.da .current:hover{
  background-color: #000;
}
.db{
}

(I got it from another Stack Overflow thread, but can't unfortunately remember, who coded it originally) into this site: http://bendrummer.de

For some reason, it doesn't work. Where is my mistake? I have looked it through several times now, but it really should work now.

Thanks a lot in advance.

Rachel Gallen · Accepted Answer · 2015-08-17 19:23:51Z

1

You need to add jquery . The original fiddle had jquery 1.64 loaded in it. If you add it in it works!

var topRange      = 200,  // measure from the top of the viewport to X pixels down
     edgeMargin    = 20,   // margin above the top or margin from the end of the page
     animationTime = 1200, // time in milliseconds
     contentTop = [];

$(document).ready(function(){
 // Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
  if ( e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel' ){
    $('html,body').stop();
  }
})

 // Set up content an array of locations
$('.da').find('a').each(function(){
  contentTop.push( $( $(this).attr('href') ).offset().top );
})

 // Animate menu scroll to content
$('.da').find('a').click(function(){
  var sel = this,
  newTop = Math.min( contentTop[ $('.da a').index( $(this) ) ], $(document).height() - $(window).height() ); // get content top or top position if at the document bottom
  $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){
    window.location.hash = $(sel).attr('href');
  });
  return false;
})

 // adjust side menu
$(window).scroll(function(){
  var winTop = $(window).scrollTop(),
  bodyHt = $(document).height(),
  vpHt = $(window).height() + edgeMargin;  // viewport height + margin
  $.each( contentTop, function(i,loc){
    if ( ( loc > winTop - edgeMargin && ( loc < winTop + topRange || ( winTop + vpHt ) >= bodyHt ) ) ){
      $('.da a').removeClass('current').eq(i).addClass('current');
    }
  })
})

});

.da {
    position:fixed;
    z-index: 2;
}
.da .current, .da .current:hover {
    background-color: #000;
}
.db {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="da"> <a href="#diva" class="current">DIV1</a>
 <a href="#divb">DIV2</a>
 <a href="#divc">DIV3</a>
 <a href="#divd">DIV4</a>

</div>
<div class="db">
    <div style="width: 300px; height: 300px; background-color: #996633"><a id="diva" name="diva">DIV1</a>

    </div>
    <div style="width: 300px; height: 300px; background-color: #CC0066"><a id="divb" name="divb">DIV2</a>

    </div>
    <div style="width: 300px; height: 300px; background-color: #3300FF"><a id="divc" name="divc">DIV3</a>

    </div>
    <div style="width: 300px; height: 300px; background-color: #99CC00"><a id="divd" name="divd">DIV4</a>

    </div>
</div>

answered Aug 17, 2015 at 19:23

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

juliusklaus Over a year ago

I thought I already implemented it? I changed it anyways to jquery 1.6.4. — it still doesn't work. :(

Rachel Gallen Over a year ago

from looking at your site it works perfectly. please accept mu answer

juliusklaus Over a year ago

I tested it in Chrome, Firefox and Safari — from my side here it doesn't. Neither animation nor navigation marker. Also I had jquery already implemented?!

Rachel Gallen Over a year ago

it works as it should, and i tested it the vsn of chrome b4 chromium

Collectives™ on Stack Overflow

Scrolling script implementation doesn't work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related