सवाल तत्व के लिए jQuery स्क्रॉल


मेरे पास यह है input तत्व:

<input type="text" class="textfield" value="" id="subject" name="subject">

तब मेरे पास कुछ अन्य तत्व हैं, जैसे कि अन्य टेक्स्ट इनपुट, टेक्स्टारे आदि।

जब उपयोगकर्ता उस पर क्लिक करता है input साथ में #subject, पृष्ठ को एक अच्छी एनीमेशन के साथ पृष्ठ के अंतिम तत्व पर स्क्रॉल करना चाहिए। यह नीचे स्क्रॉल होना चाहिए और शीर्ष पर नहीं होना चाहिए।

पृष्ठ का अंतिम आइटम ए है submit के साथ बटन #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

एनीमेशन बहुत तेज़ नहीं होना चाहिए और तरल होना चाहिए।

मैं नवीनतम jQuery संस्करण चला रहा हूँ। मैं किसी भी प्लगइन को स्थापित करना पसंद नहीं करता लेकिन इसे प्राप्त करने के लिए डिफ़ॉल्ट jQuery सुविधाओं का उपयोग करना पसंद करता हूं।


1875
2017-07-13 09:49


मूल




जवाब:


मान लें कि आपके पास आईडी के साथ एक बटन है button, इस उदाहरण को आजमाएं:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

मुझे लेख से कोड मिला एक jQuery प्लगइन के बिना एक तत्व के लिए चिकनी स्क्रॉल करें। और मैंने इसे नीचे दिए गए उदाहरण पर परीक्षण किया है।

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3481
2017-07-13 09:52



यह सभी मामलों में काम नहीं करेगा। देख stackoverflow.com/questions/2905867/... - Jānis Elmeris
@ बैरी चैपलैन बिल्कुल नहीं। गुगल करने के बाद मुझे मिला है इस, इसलिए यदि आप प्रति ब्राउज़र प्रकार के अतिरिक्त तर्क नहीं चाहते हैं तो दोनों टैग की आवश्यकता है। - s3m3n
यदि आप एनीमेशन नहीं चाहते हैं, और इसके बजाय तुरंत तत्व पर कूदना चाहते हैं, तो उपयोग करें .scrollTop(…)के बजाय .animate({scrollTop: …}, …)। - Rory O'Kane
आपके अलावा समाधान (जो बहुत अच्छा काम करता है) के अतिरिक्त, आप एक पूर्ण फ़ंक्शन जोड़ सकते हैं जो हैशटैग को यूआरएल में जोड़ता है। इस मामले में यह स्क्रॉल नहीं करेगा, क्योंकि स्क्रॉल पहले से ही सही स्थिति पर स्क्रॉल किया गया है, और यदि कोई उपयोगकर्ता यूआरएल की प्रतिलिपि बनाता है तो यह पृष्ठ पर सही जगह पर स्वचालित रूप से स्नैप हो जाएगा। - Sander
यदि आप एनीमेशन पूर्ण होने पर चलाने के लिए कॉलबैक का उपयोग करते हैं और कॉलबैक को इस समाधान के साथ दो बार आग लगती है, तो "$ ('html body') का उपयोग करने का प्रयास करें। (" "बजाय" $ ('html, body') .animate (... "अल्पविराम ने दो एनिमेट घटनाएं बनाईं। एचटीएमएल के लिए एक, शरीर के लिए एक। आप वास्तव में सिर्फ एचटीएमएल बॉडी के लिए चाहते हैं धन्यवाद @ टीजे पाउडर stackoverflow.com/questions/8790752/... - BoatCode


  jQuery .scrollTo() Method 

jQuery .scrollTo ():  देखें - डेमो, एपीआई, स्रोत

मैंने पृष्ठ / तत्व स्क्रॉलिंग को अधिक आसान बनाने के लिए इस हल्के प्लगइन को लिखा है। यह लचीला है जहां आप एक लक्ष्य तत्व या निर्दिष्ट मूल्य में पारित कर सकते हैं। शायद यह jQuery की अगली आधिकारिक रिलीज का हिस्सा हो सकता है, आपको क्या लगता है?


उदाहरण उपयोग:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

विकल्प:

scrollTarget: एक तत्व, स्ट्रिंग, या संख्या जो वांछित स्क्रॉल स्थिति इंगित करता है।

offsetTop: एक संख्या जो स्क्रॉल लक्ष्य के ऊपर अतिरिक्त अंतर को परिभाषित करती है।

अवधि: एक स्ट्रिंग या संख्या यह निर्धारित करती है कि एनीमेशन कितनी देर तक चलेंगे।

आसान: एक स्ट्रिंग जो इंगित करती है कि संक्रमण के लिए किस आसान कार्य का उपयोग करना है।

पूर्ण: एनीमेशन पूर्ण होने के बाद कॉल करने के लिए एक फ़ंक्शन।


454
2017-10-05 08:50



डेमो क्रोम पर काम नहीं करता है - alex
यह क्रोम पर हालिया अपडेट तक काम कर रहा था। मेरे पास एक ऐसा संस्करण है जो काम करता है कि मैं वर्तमान में memoryboxweddings.com/photography-posts (यदि आप इसे आज़माकर देखना चाहते हैं) पर उपयोग कर रहे हैं। एक बार यह तय होने के बाद मैं एक अद्यतन पोस्ट करूंगा। - Timothy Perez
@ टिमोथीपेरेज़: मुझे यकीन है कि वाणिज्यिक उपयोग के लिए कुछ अनुमोदित है? मुझे यकीन है कि ऐसे कई लोग हैं जो अपनी वेबसाइटों में कहीं भी कोड के उस स्निपेट का उपयोग करना चाहते हैं और इससे उन्हें रात में थोड़ा सा आराम करने में मदद मिलेगी? शायद एमआईटी लाइसेंस की तरह कुछ आपकी आवश्यकताओं के अनुरूप हो सकता है? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$ ('बॉडी') एफएफ में काम नहीं किया, इसलिए $ ('html, body') की कोशिश की जो काम करता था। - kiranvj
अगर किसी को इस स्क्रिप्ट स्रोत की आवश्यकता है, तो यहां आप इसे प्राप्त कर सकते हैं flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


यदि आप चिकनी स्क्रॉल प्रभाव में बहुत रुचि नहीं रखते हैं और किसी विशेष तत्व पर स्क्रॉल करने में रुचि रखते हैं, तो इसके लिए आपको कुछ jQuery फ़ंक्शन की आवश्यकता नहीं है। जावास्क्रिप्ट को आपका केस कवर किया गया है:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

तो आपको बस इतना करना है: $("selector").get(0).scrollIntoView(); 

.get(0) इसका उपयोग किया जाता है क्योंकि हम जावास्क्रिप्ट के डीओएम तत्व को पुनर्प्राप्त करना चाहते हैं, न कि JQuery के DOM तत्व।


271
2017-12-24 11:35



धन्यवाद, क्या आप जावास्क्रिप्ट और JQuery के DOM तत्व के बीच दुविधा दे सकते हैं। - Francisco Corrales Morales
क्या आप भी इस्तेमाल कर सकते हैं $(selector)[0]? - RobW
रॉबड, हाँ आप बस [0] का उपयोग कर सकते हैं, लेकिन प्राप्त करें (0) आपको अपरिभाषित या नकारात्मक इंडेक्स के खिलाफ सुरक्षा देता है। स्रोत देखें: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
यदि आप बिल्कुल jQuery का उपयोग नहीं करना चाहते हैं, तो बस उपयोग करें document.getElementById('#elementID').scrollIntoView()। किसी तत्व का चयन करने के लिए ~ 100k लाइब्रेरी लोड करने का कोई उपयोग नहीं है और फिर इसे नियमित जावास्क्रिप्ट में परिवर्तित करें। - Gavin
@ गैविन मुझे यकीन है कि आपका मतलब है कि: document.getElementById('elementID').scrollIntoView() - Brian


इसकी जाँच पड़ताल करो ScrollTo लगाना। आप डेमो देख सकते हैं यहाँ

मुझे उम्मीद है यह मदद करेगा।


42
2017-07-13 11:05



मुझे लगता है कि यह ध्यान देने योग्य है कि टिमोथी पेरेज़ की प्लगइन वाई अक्ष तक ही सीमित है, जबकि एरियल फ्लैस्लर (इस उत्तर में जुड़ा हुआ) एक रसोई सिंक से अधिक है जो एक्स और वाई स्क्रॉल दोनों का समर्थन करता है, उदाहरण के लिए विचार करना महत्वपूर्ण हो सकता है जब एक मॉडल संवाद प्रकट होता है मोबाइल पर, या मोबाइल पर विस्तृत तालिका या फॉर्म के किसी विशिष्ट भाग पर ध्यान आकर्षित करना। - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





इस सरल लिपि का उपयोग करना

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

इस तरह से बना होगा कि यदि यूआरएल में हैश टैग मिलता है, तो स्क्रॉल को आईडी पर एनिमेट करने के लिए। यदि हैश टैग नहीं मिला है, तो स्क्रिप्ट को अनदेखा करें।


26
2017-09-05 11:53





स्टीव और पीटर का समाधान बहुत अच्छा काम करता है।

लेकिन कुछ मामलों में, आपको मान को एक पूर्णांक में परिवर्तित करना पड़ सकता है। आश्चर्यजनक रूप से, से लौटा मूल्य $("...").offset().top कभी-कभी में होता है float
उपयोग: parseInt($("....").offset().top)

उदाहरण के लिए:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39





"एनिमेट" समाधान का एक कॉम्पैक्ट संस्करण।

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

मूल उपयोग: $('#your_element').scrollTo();


15
2017-08-29 11:19