将页面过渡淡入锚点

Question

我正在尝试平滑过渡到页面中的锚点。 objective 是当您单击指向锚点的 link 时，页面淡出（滚动）并随着调用的锚点本身淡入。

我有这个标记，它淡出 in/out 正确，URL 更改为被调用的锚点，但它不会滚动到被调用的元素

$(document).ready(function() {
  $("a.transition").click(function(event) {
    event.preventDefault();
    linkLocation = this.href;
    $(".container").fadeOut(500, redirectPage);

  });

  function redirectPage() {
    window.location = linkLocation;
    $(".container").fadeIn(500);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="A">This is A <a href="#B" class="transition">Go to B</a>
  </div>

  ...some large text...

  <div id="B" style="margin-top: 3000px;">This is B <a href="#A" class="transition">Go to A</a>
  </div>
</div>

Answer 1

部分问题是您没有将 linkLocation 变量传递给 redirectPage 函数。显然，如果 linkLocation 是一个全局变量，您可以在函数回调内部访问它，但我不确定这是否是您想要的。您可以使用 .bind() 方法将其直接传递给函数：redirectPage.bind(this, this.href).

第二个问题是您无法滚动到隐藏容器中的元素。滚动到 fadeIn 回调中的元素，或者在 fadeIn 动画开始后滚动到它：

$("a.transition").click(function(event) {
  event.preventDefault();
  $(".container").fadeOut(500, redirectPage.bind(this, this.href));
});

function redirectPage(link) {
  $(".container").fadeIn(500);
  setTimeout(function () {
    window.location = link;
  }, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div id="A">This is A <a href="#B" class="transition">Go to B</a>
  </div>

  ...some large text...

  <div id="B" style="margin-top: 3000px;">This is B <a href="#A" class="transition">Go to A</a>
  </div>
</div>

Answer 2

这是使用 CSS 和原版 javascript 的替代方法：

var initialiseFadePageLink = [];

function fadePage(i) {
var container = document.getElementsByClassName('container')[0];
var transitionAnchors = document.getElementsByClassName('transition');
var current = '#' + transitionAnchors[i].parentNode.getAttribute('id');
var destination = transitionAnchors[i].getAttribute('href');

transitionAnchors[i].setAttribute('href', current);
container.classList.add('fadeout');

setTimeout(function(){
window.location.hash = destination;
container.classList.remove('fadeout');
transitionAnchors[i].setAttribute('href', destination);
}, 1000);

}


function fadePageLinks(i) {
return function(){
var transitionAnchors = document.getElementsByClassName('transition');
transitionAnchors[i].addEventListener('click',function(){fadePage(i);},false);
};
}


function initialiseFadePageLinks() {
var transitionAnchors = document.getElementsByClassName('transition');
for (var i = 0; i < transitionAnchors.length; i++) {
initialiseFadePageLink[i] = fadePageLinks(i);
initialiseFadePageLink[i]();
}
}

window.addEventListener('load',initialiseFadePageLinks,false);

#B {
margin-top: 3000px;
}

.container {
opacity: 1;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}

.container.fadeout {
opacity: 0;
}

<div class="container">
<div id="A">This is A <a href="#B" class="transition">Go to B</a></div>
...some large text...
<div id="B">This is B <a href="#A" class="transition">Go to A</a></div>
</div>

将页面过渡淡入锚点

Fade page transition to an anchor

javascript

jquery

anchor

fade