Question

我在导轨4中有一个带有徽标的bootstrap 3导航栏。当文档准备就绪时，它运行：

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

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

如果我点击导航栏中的徽标，它会使用以下代码滚动到页面顶部：

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

但是，如果我点击不同的导航栏项目（例如＆＃34;关于我＆＃34;）然后点击徽标，它会加载主页但不会滚动到正确的位置。

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

谢谢！

更新：Todd完全正确地将.ready更改为.on＆＃34; page：change＆＃34;是解决这个问题的关键。单击链接后，已完成将滚动到默认位置或向下滚动链接位置。谢谢！

$(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

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

做的：

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

非咖啡版

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


});

如何在页面加载后执行jquery animate滚动？

1 个答案: