Jquery 和 CoffeeScript scrollTo 与 Rails 和 Haml

Question

我正在尝试使用 CoffeeScript Rails 和 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") 

但这不起作用。关于我做错了什么的任何想法？

Answer 1

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

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

CoffeeScript 会自动scopes your variables to their function，所以你的 CoffeeScript 会变成这样的 JavaScript：

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

还有另一个自动执行的函数包装器（除非你 compile with -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，您可能不想在 DOM 准备好之前调用 scrollToArea：

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

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

Answer 2

我不熟悉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);
});

Example fiddle

---

如果你想动画滚动，使用这个：

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

Example fiddle