轨道:涡轮链接回到页面顶部

Rails: Turbolinks back to top of page

本文关键字：顶部 链接 轨道      更新时间：2023-09-26

我正在为轨道使用涡轮连杆；每当我点击一个链接，页面就会向下滚动到上一页的滚动位置。我希望加载所有页面，使其不会向下滚动（保持在页面顶部）。我不需要涡轮链接来记住我以前的滚动位置。那么，我如何强制页面加载，滚动位置在顶部（0,0）？

我试过

$ ->
    window.scrollTo 0,0

但我可能不会约束这个权利。

您可能正在使用旧版本的涡轮连杆。此问题已修复。

尝试更新您的Gemfile以使用更新的版本。我在使用"1.1.1"时遇到了同样的问题，但在切换到"2.2.3"后得到了解决。

am在rails 6上也面临同样的问题。要解决这个问题，您必须告诉浏览器在通过历史记录恢复或重新加载时不要处理滚动。下面是处理位置的综合脚本

;(function () {
  // Tell the browser not to handle scrolling when restoring via the history or when reloading
  if ('scrollRestoration' in history) history.scrollRestoration = 'manual'
  var SCROLL_POSITION = 'scroll-position'
  var PAGE_INVALIDATED = 'page-invalidated'
  // Patch the reload method to flag that the following page load originated from the page being invalidated
  Turbolinks.BrowserAdapter.prototype.reload = function () {
    sessionStorage.setItem(PAGE_INVALIDATED, 'true')
    location.reload()
  }
  // Persist the scroll position when leaving a page
  addEventListener('beforeunload', function () {
    sessionStorage.setItem(
      SCROLL_POSITION,
      JSON.stringify({
        scrollX: scrollX,
        scrollY: scrollY,
        location: location.href
      })
    )
  })
  // When a page is fully loaded:
  // 1. Get the persisted scroll position
  // 2. If the locations match and the load did not originate from a page invalidation, scroll to the persisted position
  // 3. Remove the persisted information
  addEventListener('DOMContentLoaded', function (event) {
    var scrollPosition = JSON.parse(sessionStorage.getItem(SCROLL_POSITION))
    if (shouldScroll(scrollPosition)) {
      scrollTo(scrollPosition.scrollX, scrollPosition.scrollY)
    }
    sessionStorage.removeItem(SCROLL_POSITION)
    sessionStorage.removeItem(PAGE_INVALIDATED)
  })
  function shouldScroll (scrollPosition) {
    return (
      scrollPosition &&
      scrollPosition.location === location.href &&
      !JSON.parse(sessionStorage.getItem(PAGE_INVALIDATED))
    )
  }
})()

原因是Turbolink在没有刷新页面的情况下替换了DOM元素，因此滚动保持在相同的位置。

要进行更改，您需要观察Turbolinks发出的指示页面加载完成的事件，然后开始滚动操作。

试试这个：

$ ->
  $(document).on 'page:load', ->
    window.scrollTo 0, 0

我在Rails6中遇到了同样的问题，并通过添加解决了这个问题

document.addEventListener("turbolinks:load", function() {
    window.scrollTo(0,0)
});

在application.html.erb.的<script>标签下

这基本上是将EventListener添加到DOM中，每当涡轮链接加载时，它都会自动滚动到页面顶部。

相关文章：