Question

我花了很长时间试图找到这个问题的答案，但没有取得任何成功。基本上我需要在用户转到healthdollars.com/#contact时将其滚动到网站的联系人部分。这在Safari中运行得很好，但在Chrome中我没有运气。我已经尝试使用jQuery / Javascript强制浏览器向下滚动，但我还是没能。

有没有人有任何想法？这让我很疯狂 - 特别是因为这样做很简单。

Answer 1

如果您禁用Javascript，则不是完整答案，但在Chrome中我相信您会获得所需的行为。这让我相信JavaScript中的某些内容阻止了浏览器的默认行为。

Answer 2

在我看来，当页面首次加载时，目标元素并不存在。如果我导航到页面然后添加哈希，我就不会有任何问题。

if (window.location.hash.length && $(location.hash)) {
  window.scrollTo(0, $(location.hash).offset().top)
}

检查哈希，找到元素的页面偏移量，并在那里滚动（x，y）。

编辑：我注意到，实际上，页面从#contact开始，然后滚动回到顶部。我同意另一位回答者的看法，即您网页上的某些内容会让您滚动到顶部。我在添加黑客之前会搜索它。

Answer 3

如果你有JQuery，你可以用JS做这个。

$(function(){
  // get the selector to scroll (#contact)
  var $to = $(window.location.hash);

  // jquery animate
  $('html'/* or body */).animate({ scrollTop: $to.offset().top });
});

Answer 4

HTML 5中不存在name属性，因此当您使用DOCTYPE html时，chrome会使name属性过时。

其他浏览器尚未赶上。

更改

<a name="contact"></a>

到

<a id="contact"></a>

Answer 5

使用vanilla javascript这个解决方法可能很有用：

// Get the HTMLElement that you want to scroll to. 
var element = document.querySelector('#contact');
// Stories the height of element in the page.
var elementHeight = element.scrollHeight;
// Get the HTMLElement that will fire the scroll on{event}.
var trigger = document.querySelector('[href="#contact"]');    
trigger.addEventListener('click', function (event) {
  // Hide the hash from URL.
  event.preventDefault();
  // Call the scrollTo(width, height) method of window, for example.
  window.scrollTo(0, elementHeight);
})

Chrome会忽略网址中的哈希值

5 个答案: