当 url 包含锚点时,获取页面加载时网页滚动条的垂直位置

发布于 2024-11-12 22:28:03 字数 551 浏览 2 评论 0原文

我使用 jQuery 的scrollTop() 方法来获取页面加载时滚动条的垂直位置。我需要在执行 url 中的锚点后获取此值(例如 url:www.domainname.com#foo)。我可以使用下面的代码,它可以在 Firefox 和 IE 中工作:

ex url: www.domainname.com#foo

$(document).ready(function() {    
    if ($(this).scrollTop() > 0) {
         // then a conditional statement based on the scrollTop() value
         if ($(this).scrollTop() > $("#sidenav").height()) { ...

但在 Safari 和 Chrome 中 document.ready() 似乎在锚点之前执行,因此 scrollTop() 在页面加载时返回 0这个场景。在 Chrome 和 Safari 中执行锚点后,如何访问页面加载时的 scrollTop() 值?

I am using jQuery's scrollTop() method to get the vertical position of the scroll bar on pageload. I need to get this value after the anchor in the url is executed (ex url: www.domainname.com#foo). I can use the following code and it works in Firefox and IE:

ex url: www.domainname.com#foo

$(document).ready(function() {    
    if ($(this).scrollTop() > 0) {
         // then a conditional statement based on the scrollTop() value
         if ($(this).scrollTop() > $("#sidenav").height()) { ...

But in Safari and Chrome document.ready() seems to execute before the anchor so scrollTop() returns 0 on page load in this scenario. How can I access the scrollTop() value on page load after the anchor executes in Chrome and Safari?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浅笑轻吟梦一曲 2024-11-19 22:28:03

您可能只想做一些快速而肮脏的事情,例如 setTimeout ,无论需要多少毫秒才能从 Chrome 或 Safari 可靠地获取它。

var MAX_CHECKS = 5;             // adjust these values
var WAIT_IN_MILLISECONDS = 100; // however works best
var checks = 0;

function checkScroll() {
  if ($(this).scrollTop() > 0) {
    // then a conditional statement based on the scrollTop() value
    if ($(this).scrollTop() > $("#sidenav").height()) {
      ...
    }
  } else {
    if (++checks < MAX_CHECKS) {
      // just to make sure, you can try again
      setTimeout(checkScroll, WAIT_IN_MILLISECONDS);
    }
  }
}

$(document).ready(function() {
  // You can also throw in an if statement here to exclude
  // URLs without # signs, single out WebKit browsers, etc.
  setTimeout(checkScroll, WAIT_IN_MILLISECONDS);
  ...
});

请注意,您也可以使用 if ($.browser. webkit),尽管此功能已被弃用,并且可能会移动到插件而不是主 jQuery(有利于功能检测)。

You might just want to do something quick-and-dirty like setTimeout for however many milliseconds it takes to get it from Chrome or Safari reliably

var MAX_CHECKS = 5;             // adjust these values
var WAIT_IN_MILLISECONDS = 100; // however works best
var checks = 0;

function checkScroll() {
  if ($(this).scrollTop() > 0) {
    // then a conditional statement based on the scrollTop() value
    if ($(this).scrollTop() > $("#sidenav").height()) {
      ...
    }
  } else {
    if (++checks < MAX_CHECKS) {
      // just to make sure, you can try again
      setTimeout(checkScroll, WAIT_IN_MILLISECONDS);
    }
  }
}

$(document).ready(function() {
  // You can also throw in an if statement here to exclude
  // URLs without # signs, single out WebKit browsers, etc.
  setTimeout(checkScroll, WAIT_IN_MILLISECONDS);
  ...
});

Note that you can also use if ($.browser.webkit), although this feature is deprecated and may be moved to a plugin instead of the main jQuery (in favor of feature detection).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文