使用 ScrollTo 插件滚动到点击的元素答案

【问题标题】：Using the ScrollTo plugin to scroll to the element clicked on使用 ScrollTo 插件滚动到点击的元素
【发布时间】：2014-06-19 23:19:41
【问题描述】：

我想使用 ScrollTo 插件滚动到被点击的元素。这样被点击的元素就会出现在页面的顶部。我有以下代码：

scripts.js

$(document).ready(function(){
    $("#post").hover(
        function(){
            $("#sbox").toggle("slow");
        },
        function(){
            $("#sbox").toggle("slow");
        });
        $(".jumbotron").click(function(){
            jQuery(this).ScrollTo();
        });

});

这会引发错误：

[Error] TypeError: 'undefined' is not a function (evaluating 'jQuery(this).ScrollTo()')
    (anonymous function) (scripts.js, line 10)
    dispatch (jquery-1.11.1.js, line 4641)
    handle (jquery-1.11.1.js, line 4309)

我该怎么做？

【问题讨论】：

标签： jquery jquery-plugins scrollto

【解决方案1】：

发生这种情况是因为您试图滚动元素本身，同时您想将窗口滚动到元素（或 iframe，如果在 iframe 内）。

documentation指定，在滚动整个窗口的情况下，我们可以如下使用它的滚动：

$.scrollTo(position, transitionSpeed,{...});

为我们留下一些最终结果的变化：

$(".jumbotron").click(function(){
   $.scrollTo($(this).position().top, 500); //gets top position of element
});

定位需要什么，这是一个例子

我已经用工作示例设置了一个小提琴 >> http://jsfiddle.net/3M5fE/，蓝色 div 是带有滚动条的。

【讨论】：

为下方有足够屏幕的元素正确滚动，但对于某些元素没有足够的屏幕。我该怎么办？
没什么可做的，如果下面没有空间你甚至不能手动滚动，它会去它可以去的最大值。 jsfiddle.net/3M5fE/1
有一种方法可以在下面添加更多“屏幕”，这样即使点击了最低元素，它也会滚动到顶部？
@haky_nash 您可以明确设置元素包装器的高度，使其适合所有内容，这样做，如果您需要方向，请显示您的 html
它有一些 Django 并扩展了一堆其他的 html 页面。很难表现出来。你能给我举个例子吗？

【解决方案2】：

插件名为scrollTo，带有小写的“s”。

试试这个

$(document).ready(function(){
    $("#post").hover(
        function(){
            $("#sbox").toggle("slow");
        },
        function(){
            $("#sbox").toggle("slow");
        });
        $(".jumbotron").click(function(){
            $.scrollTo(this);
        });
});

根据情况将这些 toggle() 更改为 show() 或 hide() 会更安全。

【讨论】：