पेज लोड पर आईडी पर चेतन स्क्रॉल करें

123

पृष्ठ लोड पर किसी विशेष आईडी पर स्क्रॉल को चेतन करने के लिए Im ट्रिंग। मैंने बहुत शोध किया है और इस पर आया हूं:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

लेकिन यह आईडी और पेज के शीर्ष पर चेतन से शुरू होता है?

HTML (जो पृष्ठ के आधे रास्ते नीचे है) बस है:

<h2 id="title1">Title here</h2>

jquery scroll jquery-animate

— आदि
स्रोत

1

यह ज़्यादातर जवाब नहीं है, लेकिन मैं एरियल फ्लेस्लर के "स्क्रोल्टो" प्लगइन की अत्यधिक अनुशंसा करता हूं; इसमें पृष्ठ के बारे में पैन करने के लिए बहुत सारी विशेषताएं हैं, और सामान्य मामलों के लिए प्लगइन के लिए कुछ एक्सटेंशन (उदाहरण के लिए, आपको उसका "लोकलक्रोकल" प्लगइन एक लिंक के href पर स्क्रॉल करने के लिए उपयोगी हो सकता है यदि यह उसी पृष्ठ पर है)। आप यहां प्लगइन प्राप्त कर सकते हैं: flesler.blogspot.com/2007/10/jqueryscrollto.html

— फैसल

327

आप केवल अपने तत्व की ऊंचाई को स्क्रॉल कर रहे हैं। ऑफसेट () दस्तावेज़ के सापेक्ष एक तत्व के निर्देशांक लौटाता है, और topपरम आपको y- अक्ष के साथ पिक्सेल में तत्व की दूरी देगा:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

और आप इसमें देरी भी कर सकते हैं:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

— BumbleB2na
स्रोत

1

यह स्वचालित स्क्रॉलिंग के बारे में क्या है जो मुझे "WOW COOL !!" जाने देता है? शायद यह आपके समाधान की सरलता है।

— दिबांग

मुझे पृष्ठ लोड पर एक तत्व को स्क्रॉल करने की आवश्यकता थी, लेकिन दो मुद्दे थे: ए) "html, बॉडी" का उपयोग करके दो कॉलबैक दिए गए (प्रत्येक मिलान किए गए तत्व के लिए एक)। b) यह ब्राउज़र पर निर्भर करता है कि कौन सा शरीर या HTML काम करता है। इसलिए मैंने एक जिस्ट बनाया जिसे आप अपने प्रोजेक्ट में उपयोग करने के लिए "किसी भी" ब्राउज़र पर स्क्रॉल-इन-व्यू काम सुनिश्चित करने के लिए अनुकूलित कर सकते हैं और एनीमेशन समाप्त होने पर आपको केवल एक कॉलबैक मिलेगा। gist.github.com/netsi1964/4ddffe1ae14e05220d25

— Netsi1964

2

यह वास्तव में सही नहीं है। आपको वास्तव में शरीर या तत्व की वर्तमान स्क्रॉल स्थिति पर विचार करना चाहिए जिसे हम करने की कोशिश कर रहे हैं scroll। इस बात को ध्यान में रखते हुए कि आप जिस तत्व को देखना चाहते हैं, bodyउसकी offset().topस्थिति में वर्तमान स्क्रॉल स्थिति जोड़ देंगे , परिणामी राशि वह मान है जिसे हम स्क्रॉल करना चाहते हैं। $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@magreenberg क्या आपने इसे आज़माया है? यदि वर्तमान स्क्रॉल स्थिति 0 से ऊपर कुछ भी है, तो आप जो सुझाव दे रहे हैं वह काम नहीं कर सकता है। मान लें कि स्क्रॉल करने योग्य कंटेनर 1000 पिक्सेल लंबा है और वर्तमान स्क्रॉल स्थिति 1000 पर है। मान लीजिए कि आप उस तत्व को स्क्रॉल कर रहे हैं जो 500 केंद्र में लंबवत केंद्र में बैठता है। मुझे लगता है कि आप जो सुझाव दे रहे हैं, उसे 1500 तक स्क्रॉल करने के लिए कहेंगे , सही?

— BumbleB2na

@ BumbleB2na .offset().topआपको इस उदाहरण में एक नकारात्मक संख्या देगा। और यह वास्तव में केवल काम करता है bodyऔर htmlचूँकि offset().topआपको दस्तावेज़ शीर्ष ऑफसेट देने वाला है, न कि इच्छित स्क्रॉल अभिभावक।

— Mattdevio

12

स्क्रॉल जावास्क्रिप्ट के साथ शुद्ध जावास्क्रिप्ट समाधान () फ़ंक्शन:

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

स्निपेट का विस्तार करें

PS 'चिकनी' पैरामीटर अब क्रोम 61 से काम करता है क्योंकि टिप्पणियों में उल्लिखित julien_c है ।

— व्लादिमीर Vovk
स्रोत

1

अब काम करता है (क्रोम 61 से)

— julien_c

ब्राउज़र संगतता की जांच करना सुनिश्चित करें। 10/2018 IE (11), एज और सफारी का समर्थन "स्क्रॉल इनटू व्यू" लेकिन "चिकनी" विकल्प नहीं।

— धातु_जैक

शुद्ध JS ftw। उस स्निपेट के लिए धन्यवाद! डबल बटर क्रीम के रूप में चिकना

— जीन डी

4

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-all-browser ।

— एलेएक्स ग्रे
स्रोत

3

इसके लिए jquery प्लगइन है। यह एक विशिष्ट तत्व को दस्तावेज़ स्क्रॉल करता है, ताकि यह पूरी तरह से व्यूपोर्ट के बीच में हो। यह एनीमेशन ईलिंग का भी समर्थन करता है ताकि स्क्रॉल प्रभाव सुपर सुचारू दिखाई दे। चेक इस लिंक ।

आपके मामले में कोड है

$("#title1").animatedScroll({easing: "easeOutExpo"});

— यूजीन ट्यूरिन
स्रोत

"यह एनीमेशन ईज़िंग्स का भी समर्थन करता है ताकि स्क्रॉल प्रभाव सुपर सुचारू दिखे" दुर्भाग्य से, यह सच नहीं है। यदि कंप्यूटर किसी कारण से धीमा है, तो यह वास्तव में ठीक से चले बिना कूदता रहता है।

— ब्रूनोइस

चिकनी स्क्रॉलिंग के लिए गणना के लिए बहुत अधिक पिक्सेल की आवश्यकता होती है। निश्चित रूप से एक धीमा "कंप्यूटर" (अधिक GPU) ऐसा नहीं कर सकता है, लेकिन पर्याप्त ALUs की कमी के कारण। इसलिए आम तौर पर वह सही है। और वास्तव में आसान स्क्रॉलिंग लिब।

— रोलैंड

1

निम्नलिखित कोड के साथ प्रयास करें। वर्ग नाम पृष्ठ-स्क्रॉल के साथ तत्व बनाते हैं और hrefइसी नाम को संबंधित लिंक पर रखते हैं

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

— अखिल
स्रोत

-3

सरल स्क्रॉल के लिए, निम्नलिखित शैली का उपयोग करें

ऊंचाई: 200 पीएक्स; अतिप्रवाह: स्क्रॉल;

और इस शैली वर्ग का उपयोग करें जो आप स्क्रॉल दिखाना चाहते हैं

— मिमी
स्रोत