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.

Answer 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>