javascript - 页面加载后如何执行 jquery 动画滚动？

Question

我在 Rails 4 中有一个 Bootstrap 3 导航栏，上面有一个 Logo 。当文档准备好后，它会运行:

$(document).ready ->
  $("html,body").animate
    scrollTop: 270
  , "slow"

这可以正确对齐浏览器中的顶部图像。

如果我单击导航栏中的 Logo ，它将滚动到页面顶部并显示以下代码:

  $("#home").click (e)->
    e.preventDefault()
    $("html,body").animate
      scrollTop: 270
    , "slow"

但是，如果我单击不同的导航栏项目(例如“关于我”)，然后单击 Logo ，它会加载主页，但不会滚动到正确的位置。

如何确保每次加载页面时页面滚动都能可靠地发生，以便照片始终初始对齐？

谢谢!

更新:托德绝对正确，将“page:change”上的 .ready 更改为 .on 是解决此问题的关键。单击链接时，完成的内容将滚动到默认位置或向下滚动链接位置。谢谢!

$(document).on "page:change", (e)->
    if $("#intro").length
        e.preventDefault()
        $("html,body").animate
        scrollTop: 270
      , "slow"

        $("#home").click (e)->
            e.preventDefault()
            $("html,body").animate
                scrollTop: 270
            , "slow"


    $("#scroll-down-link").click (e)->
        e.preventDefault()
        $("html,body").animate
            scrollTop: 1300
        , "slow"

Answer 1

涡轮链接不会触发就绪事件，因此您必须使用“page:change”事件。很详细HERE 。它以这种方式工作是因为涡轮链接会覆盖正常的页面加载过程。

做:

$(document).on 'page:change', ->

非coffeescript版本

$(document).on('page:change', function() {


});