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

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

请注意，由于margin-top上的12px #gallery.cinematography，它有点偏离。放弃它或将{12}添加到scroll_to

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

Answer 2

您使用的顶部偏移来自元素#main，您希望它来自.scroll元素，其ID与哈希相同。更改以下代码：

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

Answer 3

试试吧

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

jQuery滚动定位不好

3 个答案: