Fixing Smooth Scroll Issue

Question

A simplified version of what I'm working with: http://jimmehrabbitdesigns.com/scroll.html

I got the scrolling to work, however, it doesn't transition from section to section.

Example: if you click NUMBER 3, it will scroll to section THREE. From there, this is what happens.
- Clicking NUMBER 2 takes you back to section ONE.
- Clicking NUMBER 4 takes you to section TWO.
- Clicking NUMBER 3 again also takes you back to section ONE.

This is the same for all the sections.

---

jQuery code used:

$('a[href*="#"]:not([href="#"])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('#right').animate({ scrollTop: target.offset().top }, 1000);
            return false;
        }
    }
});

Answer 1

I've changed your code a bit. It's more simple and it helps you understanding what is happening. I hope it helps you:

/*
1. I've changed the position fixed to position absolute on the #right element, the scroll won't work with position: fixed set
2. Added the on click event on the anchor tag this way I'm getting the href of the current clicked anchor by using $(this) and attr() method 
3. Added the e.preventdefault() to prevent the default action of the anchor element 
4. Doing the smooth scroll using the href got at 2 as id selector
*/

The jQuery code looks like this:

$('#left a').on('click', function(e) {
  e.preventDefault();
  var id = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(id).offset().top
  }, 1000);
});

You can see the full working snippet by clicking the below button:

$('#left a').on('click', function(e) { 
    e.preventDefault(); 
    var id = $(this).attr('href');
     $('html, body').animate({
        scrollTop: $(id).offset().top
    }, 1000);
});

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#left {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
}
#right {
  width: 50%;
  height: 100%;
  background-color: #0000FF;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
#one {
  height: 100%;
  background-color: #FF0000;
}
#two {
  height: 100%;
  background-color: #00FF00;
}
#three {
  height: 100%;
  background-color: #FFFF00;
}
#four {
  height: 100%;
  background-color: #00FFFF;
}
#five {
  height: 100%;
  background-color: #FF00FF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div id="left">
    <a href="#one">NUMBER 1</a>
    <br>
    <a href="#two">NUMBER 2</a>
    <br>
    <a href="#three">NUMBER 3</a>
    <br>
    <a href="#four">NUMBER 4</a>
    <br>
    <a href="#five">NUMBER 5</a>
  </div>
  <div id="right">
    <div id="one" width="100%" height="100%">ONE</div>
    <div id="two" width="100%" height="100%">TWO</div>
    <div id="three" width="100%" height="100%">THREE</div>
    <div id="four" width="100%" height="100%">FOUR</div>
    <div id="five" width="100%" height="100%">FIVE</div>
  </div>
</div>

Also you can check this JSFIDDLE if you want.