将页面转换淡化为锚点

Question

我试图平滑过渡到页面中的锚点。目标是当您单击指向锚点的链接时，页面淡出（滚动）并随被调用的锚点本身淡入。

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

＆＃13;

＆＃13;

$(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);
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是使用CSS和普通香草javascript的替代方案：

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

＆＃13;

＆＃13;

$("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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;