5

我正在尝试在页面上制作滚动效果，滚动效果很平滑，但它错过了项目的实际位置，并在点击几下位置后开始出现错误。

例如，如果您单击最后一个项目，它会转到那里，但之后如果您单击第三个项目，则滚动会转到顶部（？）。所以我想我在这里遗漏了一些东西。有人知道如何纠正这个问题吗？

这是我的标记：

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

我试图在没有插件的情况下做到这一点，所以如果有这个代码的解决方案会更好！

4

3 回答 3

7

你想在这里使用的是.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 on ，它有点偏离#gallery.cinematography。要么删除它，要么添加 12scroll_to

JQuery's Doc 是不言自明的，但如果有什么你不明白的，请随时询问。

于 2013-02-24T18:53:19.367 回答
0

您使用的顶部偏移量来自元素#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);
    });
});
于 2013-02-22T09:26:18.060 回答
0

尝试一下

$(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
        });
    });
});
于 2013-02-22T10:17:01.793 回答