jquery - 没有方法scrollTo

Question

我试图在backbone.js 事件函数中调用scrollTo 方法。我想在单击列表 anchor 时滚动到某个 div 标签。我将单击事件绑定(bind)到一个函数并在该函数中调用了 scrollTo 方法，但出现错误“Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,当我单击 anchor 时，h)} 没有方法“scrollTo””。

请帮忙!

这里是一些示例代码。

var MenuItemListView = Backbone.View.extend({
    el: $('#menuitem_list_container'),
    initialize: function() {
        _.bindAll(this, 'render');
    },
    render: function() {
        var template = _.template( $("#menuitem_list_template").html(), {selectedindex: menuItemList.get('selectedindex'), menuitemlist: menuItemList.get('menuitemlist')});
        this.el.html(template);
        return this;
    },
    events: {
        "click .nav a":"buttonClick"
    },
    buttonClick: function(e) {
        e.preventDefault();
        target = e.currentTarget.hash;
        alert(target);
        $.scrollTo(target, 100);
    }
});

Answer 1

据我所知，您在这里所做的事情是错误地使用了scrollTo插件。 e.currentTarget.hash 将是一个字符串，scrollTo 插件允许的参数是:

• 相对选择器 $(...).scrollTo( 'li:eq(14)', 800 );
• jQuery 对象 $(...).scrollTo( $('div li:eq(14)'), 800 );
• DOM 元素 $(...).scrollTo( $('ul').get(2).childNodes[20], 800 );
• 绝对数字 $(...).scrollTo( 150, 800 );
• 绝对数字(哈希) $(...).scrollTo( { top:800, left:700}, 800 );
• 绝对位置 $(...).scrollTo( '520px', 800 );
• 绝对位置(哈希) $(...).scrollTo( {top:'110px', left:'290px'}, 800 );
• 相对位置 $(...).scrollTo( '+=100px', 800 );
• 相对位置(哈希)$(...).scrollTo( {top:'-=100px', left:'+=100'}, 800 );
• 百分比$(...).scrollTo( '50%', 800 );

所以你最终想要做的是找到你想要击中的 anchor 的位置

这些是您的 Backbone View 最终将事件绑定(bind)到的 anchor :

<div class="nav">
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
</div>

这些是您想要达到的目标:

<a name="foo">Foo</a>
<a name="bar">Bar</a>

所以你必须尝试找到所述命名 anchor 的位置，如下所示:

var hash = e.currentTarget.hash.replace('#', '');
var $anchor = $('a[name=' + hash + ']');

然后您可以使用 jQuery 对象参数，如下所示:

$.scrollTo( $anchor, 800 );

这应该可以解决你的问题