Fade page transition to an anchor

Question

I'm trying to make a smooth transition to a anchor within a page. The objective is when you click the link pointing to the anchor, the page fades out (scrolls) and fades in with the called anchor itself.

I have this mark-up, it fades in/out correctly, the URL changes to the called anchor, but it doesn't scroll to the called element

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

Rounin · Accepted Answer · 2015-12-19T23:51:13.130

Here is an alternative using CSS and plain vanilla 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>

That's amazing! This brings so many possibilites! Thank you man! — ermac, Dec 19 '15 at 22:47

score 1 · Answer 2 · answered Dec 19 '15 at 20:08

Part of the problem is that you aren't passing the linkLocation variable to the redirectPage function. Clearly if linkLocation is a global variable, you can access it inside of the function callback, but I'm not sure if that's what you were intending. You could use the .bind() method to pass it to the function directly: redirectPage.bind(this, this.href).

The second problem is that you can't scroll to an element in a hidden container. Either scroll to the element in the fadeIn callback, or scroll to it after the fadeIn animation starts:

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

Thank you Josh, it works perfectly. I owe you a beer! – ermac Dec 19 '15 at 20:31 — ermac, Dec 19 '15 at 20:31

Fade page transition to an anchor

2 Answers2