jQuery滚动定位不好

Question

我试图在页面上制作滚动效果,滚动会产生平滑效果,但它会错过项目的实际位置,并在点击几次后开始出错.

例如,如果你点击它最后一个项目,那么如果你点击第三个,滚动就会转到顶部(？).所以我觉得我在这里错过了一些东西.谁知道如何纠正这个问题？

这是我的标记:

            <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滚动示例:

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

和我的脚本:

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

我试图在没有插件的情况下这样做,所以如果有这个代码的解决方案,那就更好了!

Answer 1

你想在这里使用的是.position(),而不是.offset():

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

您可以在Google Chrome控制台中快速尝试输入以下内容:

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

然后按回车键.它会杀死你的听众并附上这个新的.

请注意,由于您的12px margin-top开启,它有点偏差#gallery.cinematography.放下它或添加12scroll_to

JQuery的Doc非常不言自明,但可以随意询问是否有一些你不理解的东西.