Question

好的，所以我有一个整页隐藏/淡出jQuery效果。一切顺利，直到我意识到delay() + fadeIn()导致了我的

<a href="http://example.com/my_page/#my_ID">Hashtag Links</a>

加载顶部的滚动位置，而不是页面上#my_ID的位置。

我知道这与整页delay() // fadeIn()效果相关。我不能选择放弃这些效果，以任何方式来解决这个问题吗？

您可以在

中查看该网站（正在制作中）

http://valeriaentertainment.com.s66112.gridserver.com/

修改

这是相关的jQuery代码：

// #curtain DIV begins hidden then fades in after #bgImage (curtain) is loaded - prevents "ribbon" loading effect in Chrome

var allDone = false;
var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  if (!allDone) {
    $('#curtain').delay(1500).fadeIn(1000);
    allDone = true;
  }
};
setTimeout(img.onload, 2000); // show the hidden stuff after 5 seconds, image or no image
img.src = url;

Answer 1

乍一看gallery page，看起来整个页面内容最初都是隐藏的。当浏览器加载页面时，它将开始查找URL片段中标识的元素;该元素将被隐藏或不可见，因此滚动到滚动位置没有任何有用的位置。

我认为最简单的方法是在.fadeIn()回调中自己处理滚动：

从window.location.hash。
找出页面上的位置，例如：
var y = $('#' + window.location.hash).offset().top;
然后将页面滚动到该位置：
$('html,body').attr('scrollTop', y);

如果您想获得幻想，您甚至可以为scrollTop更改设置动画。

这是一个让你入门的例子：

$('#curtain').delay(1500).fadeIn(1000, function() {
    // Bail out if there is no hash.
    if(!window.location.hash)
        return;

    // Convert the hash to an element and bail out
    // if there is no such element.
    var $e = $(window.location.hash);
    if($e.length < 1)
        return;

    // And, finally, do what we're here to do.
    $('html,body').attr('scrollTop', $e.offset().top);
});

如果您想要animate滚动，那么您可以将$('html,body').attr(...)部分更改为以下内容：

$('html,body').animate({ scrollTop: '+=' + $e.offset().top }, 'fast');

jQuery fadeIn Messing up #hashtag交叉链接

1 个答案: