1

我正在尝试使用CoffeeScript Railsand执行一个非常简单的任务Haml。我没用过CoffeeScript那么多，但我想试一试。

当用户按下按钮时，我希望视图滚动到某个 div id。在我的页面顶部，我有一个这样的 ID：

#area_1

我的链接如下所示：

= link_to "Area", "#", id: "area_button_1"

在我自动生成CoffeScript的文件中，我有一个如下所示的函数：

$ ->
  scrollToArea = (button, area) ->
    $(button).click ->
      scrollTo(area, 800)

我尝试在我的一个视图文件中调用此方法，如下所示：

:javascript
  scrollToArea("#area_button_1", "#area_1")

但这行不通。关于我做错了什么的任何想法？

4

2 回答 2

1

我对coffeeScript 不熟悉，但这是完成此任务的jQuery，希望它应该易于翻译。

这样做是使scrollTop窗口的 等于offset()目标元素的顶部位置。

<a href="#button" class="scroll-trigger">Go to button</a>

$('.scroll-trigger').click(function() {
    $(window).scrollTop($(this).attr('href')).offset().top);
});

示例小提琴

如果要为滚动设置动画，请使用：

$('.scroll-trigger').click(function() {
    var $el = $(this);
    $('html, body').animate({
        scrollTop: $($el.attr('href')).offset().top
    }, 2000);
});

示例小提琴

于 2013-08-17T12:55:04.537 回答
1

您可能有范围界定问题。$ ->是一个函数调用，如：

$(function() { ...
});

CoffeeScript 会自动将你的变量限定在它们的函数范围内，这样你的 CoffeeScript 就变成了这样的 JavaScript：

$(function() {
  var scrollToArea = function(button, area) { ... };
});

还有另一个围绕整个事物的自执行函数包装器（除非您使用 编译-b）以防止范围蔓延。

您甚至不需要$ ->这里，该代码只是定义了一个函数，因此它可以随时运行，您无需等到 DOM 准备好。scrollToArea如果您想在其他地方使用它，您还需要将您的函数推送到全局命名空间中。结果将如下所示：

window.scrollToArea = (button, area) ->
  $(button).click ->
    scrollTo(area, 800)

或者：

# `this` is `window` in this context so `@x` is the same as `window.x`
@scrollToArea = (button, area) ->
  $(button).click ->
    scrollTo(area, 800)

您可能还需要一个$()包装器scollToArea，您可能不想scrollToArea在 DOM 准备好之前调用：

:javascript
  $(function() { scrollToArea("#area_button_1", "#area_1") )

我不是 HAML 人，所以希望我没有破坏语法。

于 2013-08-17T16:25:58.640 回答