jQuery scroll not positioning well

Question

I´m trying to make a scrolling effect on the page, the scroll makes a smooth effect but it miss the real position of the items, and start to bug after a few position clicks.

For example if you click on the last item it goes there, but after that if you click on the third the scroll goes to top (?). so I think i´m missing something here. anybody knows how to correct the problem?

this is my markup:

            <div id="sidebar" class="clearfix">
                <ul>
                    <li>
                        <a href="#one" class="scroll">Muscles - Girls Crazy Go!</a>
                    </li>
                    <li>
                        <a href="#two" class="scroll">Tokyo Youth sports</a>
                    </li>
                    <li>
                        <a href="#three" class="scroll">Harajuku Interviews</a>
                    </li>
                    <li>
                        <a href="#four" class="scroll">Tokyo Youth</a>
                    </li>
                </ul>
            </div>

Div to scroll example:

                    <div class="cinematography_box clearfix" id="two">
                        <div class="cinematography_item">
                            <img src="img/cinematography.jpg" alt="cinematography" width="700" height="397">
                        </div>
                        <div class="cinematography_info">
                        </div>
                    </div>

and my script:

    jQuery(document).ready(function($) {
        $(".scroll").click(function(event){     
            event.preventDefault();
            $('#main').animate({scrollTop:$(this.hash).offset().top}, 500);
        });
    });

I´m trying to do this without a plugin so if there is a solution with this code it would be better!

possible duplicate of [Scroll to section by clicking list](http://stackoverflow.com/questions/15005891/scroll-to-section-by-clicking-list) — Donal Fellows, Feb 22 '13 at 09:56
The answer of mddw is detailed and complete, it was the answers before that weren't detailed enough :) — codek, Mar 01 '13 at 16:58

score 7 · Accepted Answer · answered Feb 24 '13 at 18:53

What you want to use here is .position() , not .offset() :

  $(".scroll").click(function(event){     
    event.preventDefault();
    var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
    $('#main').animate({ scrollTop:scroll_to }, 500);
  });

You can quick-try it in the Google Chrome Console by typing :

$(".scroll").off("click");
$(".scroll").click(function(event){     
  event.preventDefault();
  var scroll_to = $('#' + $(this).data('scroll-to')).position().top; 
  $('#main').animate({ scrollTop:scroll_to }, 500);
});

Then hit enter. It'll kill your listener and attach this new one.

Notice it's a little bit off because of your 12px margin-top on #gallery.cinematography. Either drop it or add 12 to scroll_to

JQuery's Doc is pretty self-explanatory, but feel free to ask if there's something you don't understand.

Yeah! it fixes completely the problem!! thank you for the complete answer! — codek, Feb 24 '13 at 18:58
Thanks. `position()` is less used than `offset()`, so less known :) — mddw, Feb 24 '13 at 19:00

Sven van Zoelen · Answer 2 · 2013-02-22T09:34:48.943

0

The top offset you're using is from the element #main and you want it from the .scroll element with the same id as the hash. Change the code in:

HTML:

<ul>
    <li>
        <a href="#one" data-scroll-to="one" class="scroll">Muscles - Girls Crazy Go!</a>
    </li>
    <li>
        <a href="#two" data-scroll-to="two" class="scroll">Tokyo Youth sports</a>
    </li>
...

jQuery:

jQuery(document).ready(function($) {        
    $(".scroll").click(function(event){     
        event.preventDefault();

        var scroll_to = $('#' + $(this).data('scroll-to')).offset().top;            
        $('#main').animate({ scrollTop:scroll_to }, 500);
    });
});

edited Feb 22 '13 at 09:34

answered Feb 22 '13 at 09:26

Sven van Zoelen

6,989
5
37
48

I added this code but now the scroll is not smooth, it just jumps on to the div – codek Feb 22 '13 at 09:28
I updated the site with your code, but happens the same, it doesn´t go to the correct location :( click first on third and the on four item and see – codek Feb 22 '13 at 09:42
The coordinates of the element to scroll to is incorrect. When i debug your site, I see that the first element is `top` 107 (when the list is not scrolled. When I scroll to the bottom and click again, then it is -838.. While it should be 0.. I found out that the offset cords are relative to the document and not the container.. More info about this: http://stackoverflow.com/questions/12286877/offset-top-returning-the-wrong-value – Sven van Zoelen Feb 22 '13 at 09:57

score 0 · Answer 3 · edited Feb 27 '13 at 17:40

0

Try it

$(document).ready(function() {
    $(".scroll").click(function(event){
        event.preventDefault();
        var obj = $.browser.webkit ? $('body') : $('html');
        obj.animate({ scrollTop: $('#sidebar').offset().top }, 750, function (){
             //callback function if any
        });
    });
});

edited Feb 27 '13 at 17:40

dersvenhesse

6,276
2
32
53

answered Feb 22 '13 at 10:17

ghanshyam.nitsan

11
6

jQuery scroll not positioning well

3 Answers3