解决平滑滚动问题

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.