页面加载后如何执行 jquery 动画滚动？答案

【问题标题】：How can I execute jquery animate scroll after page load?页面加载后如何执行 jquery 动画滚动？
【发布时间】：2015-02-25 05:04:04
【问题描述】：

我在 rails 4 中有一个 bootstrap 3 导航栏，上面有一个徽标。当文档准备好时，它会运行：

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

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

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

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

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

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

谢谢！

更新：Todd 完全正确，将 .ready 更改为 .on "page:change" 是解决此问题的关键。当点击链接时，完成的将滚动到默认位置或向下滚动链接位置。谢谢！

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

【问题讨论】：

你能把代码放到一个jsfiddle里吗？我可能因为没有很好地理解确切的问题而回答错误
没有动画 gif 或 js 小提琴，不太可能有人给出正确答案。
嘿托德，你说得对。让 jsfiddle 与引导应用程序一起工作有点棘手，但就其价值而言，我很确定我遇到的问题与 turbolinks 相关。由于 turbolinks，在页面加载后，rails 似乎没有触发 $(document).ready。

标签： javascript jquery twitter-bootstrap coffeescript

【解决方案1】：

turbo 链接不会触发 ready 事件，因此您必须改用 'page:change' 事件。详细HERE。之所以这样工作，是因为 turbo 链接覆盖了正常的页面加载过程。

做：

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

非咖啡脚本版本

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


});

【讨论】：