javascript - jQuery scroll not positioning well - Stack Overflow

admin管理员组

文章数量:1391850

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!

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!

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Feb 26, 2013 at 11:36 codek asked Feb 22, 2013 at 9:15 codekcodek 34355 gold badges2020 silver badges4949 bronze badges 2

• possible duplicate of Scroll to section by clicking list – Donal Fellows Commented Feb 22, 2013 at 9:56
• The answer of mddw is detailed and plete, it was the answers before that weren't detailed enough :) – codek Commented Mar 1, 2013 at 16:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7 +200

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.

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);
    });
});

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
        });
    });
});

本文标签： javascriptjQuery scroll not positioning wellStack Overflow