एक पृष्ठ के अंदर लंगर नेविगेट करते समय चिकनी स्क्रॉलिंग

समस्या



जब एंकर ([[नाम = लक्ष्य]]) का उपयोग करके आयोजित सिंगल-पेज साइट्स पर नेविगेट करते हैं, साथ ही जब पेज के अनुभागों से जुड़े सामग्री के साथ लंबे दस्तावेजों पर सर्फिंग करते हैं, तो एक प्रयोज्य समस्या देखी जाती है: संक्रमण तुरंत होता है, उपयोगकर्ता हमेशा यह नहीं देखता है कि उसे कहाँ स्थानांतरित किया गया था और आपको किस पर ध्यान देना चाहिए। डेमो ।



एक चौकस पाठक निस्संदेह याद करेगा कि हमारे सामने लंबे समय से क्या आविष्कार किया गया है, उदाहरण के लिए, यहां । हालांकि, आधे घंटे के लिए मेरे द्वारा खींचा गया गोवानोकॉड वॉल्यूम में कम से कम दो गुना कम है और किसी भी अतिरिक्त प्लग-इन के लिए खोज की आवश्यकता नहीं है।



कार्य



इसे ऐसा बनाएं कि उपयोगकर्ता यह स्पष्ट रूप से समझ सके कि जिस पृष्ठ का वह भाग फेंक रहा है, वह संक्रमण के उद्देश्य पर ध्यान आकर्षित करे।



निर्णय



हम jQuery की शक्ति का उपयोग करेंगे। हम एंकर संक्रमणों को रोकेंगे और पृष्ठ को संक्रमण लक्ष्य तक आसानी से स्क्रॉल करेंगे, और उसके बाद दो बार हम एक तत्व को झपकाएंगे जो कि संक्रमण लक्ष्य (या लक्ष्य, जैसा आप चाहें) का वर्णन करता है।



जब बाहर से नेविगेट करते हैं, तो लक्ष्य आसानी से हट जाता है; पृष्ठ को चालू करने की कोई आवश्यकता नहीं है। आंतरिक बदलावों के लिए, स्क्रॉल करें और पलक करें।



पृष्ठ लेआउट (Pseudocode)



ol class="toc"

a href="#1"

a href="#2"

a href="#3"

/ol



a name="1"

-

a name="2"

-

a name="3"

-









जावास्क्रिप्ट (डिफ़ॉल्ट रूप से सक्षम jQuery)

// HighLight target

$( document ).ready( function (){



// - .

var url = window.location;

var anchor = url.hash; //anchor with the # character

var anchor = url.hash.substring(1); //anchor without the # character



$( '[name=' + anchor + ']' ).next( 'h2' )

.fadeOut()

.fadeIn()

.fadeOut()

.fadeIn();



// .

$( '.toc a' ).click( function (){

var url = this ;

var anchor = url.hash; //anchor with the # character

var anchor = url.hash.substring(1); //anchor without the # character



// - , -.

// , body.

if (! $.browser.opera ) {

var targetOffset = $( 'a[name=' + anchor + ']' ).offset().top;

$( 'html,body' ).animate({scrollTop: targetOffset}, 1500);

} else {

var targetOffset = $( 'a[name=' + anchor + ']' ).next( 'h2' ).offset().top;

$( 'html' ).animate({scrollTop: targetOffset}, 1500);

} // if!opera



// .

$( '[name=' + anchor + ']' ).next( 'h2' )

.fadeOut()

.fadeIn()

.fadeOut()

.fadeIn()

.fadeOut()

.fadeIn();



// .

return false ;



// - .

//window.location.replace(this.pathname + '#' + anchor);



}); // click

}); // document ready



* This source code was highlighted with Source Code Highlighter .

डेमो