2

我正在尝试在backbone.js 事件函数中调用scrollTo 方法。单击列表锚点时，我想滚动到某个 div 标签。我将点击事件绑定到一个函数并在该函数中调用了 scrollTo 方法，但我得到了错误，“ Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,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);
    }
});
4

1 回答 1

2

据我所知，您在这里所做的是错误地使用了 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 );

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

这些是您的 Backbone 视图最终将事件绑定到的锚点：

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

这些是您要达到的目标：

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

所以你必须尝试找到所说的命名锚的位置：

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

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

$.scrollTo( $anchor, 800 );

那应该可以解决您的问题

于 2012-05-10T09:52:33.633 回答