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>
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With