javascript - 将页面过渡淡入 anchor

Question

我正在尝试在页面中平滑过渡到 anchor 。目的是当您单击指向 anchor 的链接时，页面淡出(滚动)并与调用的 anchor 本身一起淡入。

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

$(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

这是使用 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>