Przejście przejścia między stopkami a zakotwiczeniem

Question

Próbuję wykonać płynne przejście do zakotwiczenia na stronie. Celem jest kliknięcie linku wskazującego na kotwicę, strona zanika (przewija) i znika z wywoływaną samą kotwicą.

mam to mark-up, to blednie w/prawidłowo, zmiany adresu URL do zwanej kotwicy, ale nie wskaż zwanego elementu

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

Oto alternatywa za pomocą CSS i 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>

Answer 2

części Problem polega na tym, że nie przekazujesz zmiennej linkLocation do funkcji redirectPage. Oczywiście jeśli linkLocation jest zmienną globalną, możesz uzyskać do niej dostęp wewnątrz funkcji zwrotnej, ale nie jestem pewien, czy to właśnie zamierzałeś. Możesz użyć metody .bind(), aby przekazać ją bezpośrednio do funkcji: redirectPage.bind(this, this.href).

Drugi problem polega na tym, że nie można przewinąć do elementu w ukrytym pojemniku. Albo przewinąć do elementu w fadeIn zwrotnego, lub wskaż ją po zostanie uruchomiony fadeIn Animacja:

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