एक एंकर

Question

पर फीड पेज संक्रमण एक पृष्ठ के भीतर एक एंकर में एक चिकनी संक्रमण करने की कोशिश कर रहा हूं। इसका उद्देश्य यह है कि जब आप एंकर पर इंगित लिंक पर क्लिक करते हैं, तो पृष्ठ बुलाया जाता है (स्क्रॉल) और फ्लेड को एंकर के साथ ही बुलाया जाता है।

मैं इस मार्क-अप, यह fades/बाहर सही ढंग से कहा जाता है, लंगर के लिए URL परिवर्तन, लेकिन यह कहा जाता तत्व

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

यहाँ सीएसएस और सादे वेनिला जावास्क्रिप्ट का उपयोग करते हुए एक विकल्प है

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

भाग के लिए स्क्रॉल नहीं करता है समस्या यह है कि आप linkLocation वैरिएबल को redirectPage फ़ंक्शन पर पास नहीं कर रहे हैं। स्पष्ट रूप से यदि linkLocation एक वैश्विक चर है, तो आप इसे फ़ंक्शन कॉलबैक के अंदर एक्सेस कर सकते हैं, लेकिन मुझे यकीन नहीं है कि यह वही है जो आप चाहते थे। आप .bind() विधि का उपयोग सीधे कार्य में पास करने के लिए कर सकते हैं: redirectPage.bind(this, this.href)।

दूसरी समस्या यह है कि आप एक छिपे हुए कंटेनर में किसी तत्व को स्क्रॉल नहीं कर सकते हैं। या तो fadeIn कॉलबैक में तत्व के लिए स्क्रॉल, या के बाद fadeIn एनीमेशन शुरू होता है यह करने के लिए स्क्रॉल:

:

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