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

2323

मेरे पास यह 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 सुविधाओं का उपयोग करने के लिए किसी भी प्लगइन को स्थापित नहीं करना पसंद करता हूं।

javascript jquery scroll

— DiegoP।
स्रोत

3

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— क्रिस्टोफ़ रूसो

scrollToक्रोम प्लगइन की वजह से मेरे लिए अक्षम था, जो निश्चित नहीं था।

— जैक्सनकॉ

4020

मान लें कि आपके पास आईडी वाला एक बटन है 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>

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

— स्टीव
स्रोत

24

यह सभी मामलों में काम नहीं करेगा। देखें stackoverflow.com/questions/2905867/…

— JANis एल्मरिस

7

@ बेरीचम्पमैन बिल्कुल नहीं। Googling के बाद मैंने पाया यह , इसलिए दोनों टैग यदि आप ब्राउज़र प्रकार के अनुसार अतिरिक्त तर्क नहीं करना चाहती की जरूरत है।

— s3m3n

72

यदि आप एनीमेशन नहीं चाहते हैं, और इसके बजाय तत्व को तुरंत कूदना चाहते हैं, तो .scrollTop(…)इसके बजाय का उपयोग करें .animate({scrollTop: …}, …)।

— रोरी ओ'केन

11

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

— सैंडर

10

यदि आप एनीमेशन के पूर्ण होने पर कॉलबैक चलाने के लिए उपयोग करते हैं और कॉलबैक आग को दो बार इस समाधान के साथ देखते हैं, तो "$ ('html बॉडी') का उपयोग करके देखें। चेतन (..." के बजाय "$ ('html, बॉडी') .animate (... "अल्पविराम ने दो चेतन घटनाएँ बनाईं। एक html के लिए, एक शरीर के लिए। आप वास्तव में html शरीर के लिए एक चाहते हैं। धन्यवाद @TJ Crowder stackoverflow.com/questions/8790752/…

— BoatCub

526

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

विकल्प:

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

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

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

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

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

— टिमोथी पेरेज़
स्रोत

2

यह क्रोम पर हाल ही में अपडेट होने तक काम कर रहा था। मेरे पास एक संस्करण है जो वह काम करता है जो मैं वर्तमान में मेमोरीबॉक्सवाडिंग्स पर उपयोग कर रहा हूं। यह तय होने के बाद मैं एक अपडेट पोस्ट करूंगा।

— टिमोथी पेरेस

फिक्स्ड, पता चलता है कि यह वास्तव में jquery.com की जेएस फाइल थी जो इसे मार रही थी। अगर आप इसे आजमाते हैं तो अब काम करना चाहिए।

— टिमोथी पेरेज

4

@ टिमोथीप्रेज़: मुझे यकीन है कि वाणिज्यिक उपयोग के लिए कुछ अनुमति का मतलब है? मुझे यकीन है कि ऐसे कई लोग हैं जो अपनी वेबसाइटों में कहीं भी कोड के उस स्निपेट का उपयोग करना पसंद करेंगे और इससे उन्हें रात में थोड़ा आसान सोने में मदद मिलेगी? हो सकता है कि एमआईटी लाइसेंस जैसा कुछ आपकी आवश्यकताओं के अनुरूप हो? en.wikipedia.org/wiki/MIT_License

— रॉबर्ट मासैओली

13

$ ('बॉडी') FF में काम नहीं किया, इसलिए $ ('html, बॉडी') को आजमाया जो काम किया।

— किरनवाज

5

किसी को भी जरूरत इस स्क्रिप्ट स्रोत है, तो यहाँ आप इसे प्राप्त कर सकते हैं flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— आरटुर्स

370

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

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

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

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

— अथर्ववेद
स्रोत

12

क्या आप भी इस्तेमाल कर सकते हैं $(selector)[0]?

— रॉब

16

रॉब, हाँ आप बस [0] का उपयोग कर सकते हैं, लेकिन प्राप्त (0) आपको अनिर्धारित या नकारात्मक अनुक्रमित से बचाता है। स्रोत देखें: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

— corbacho

21

यदि आप jQuery का उपयोग बिल्कुल नहीं करना चाहते हैं, तो बस उपयोग करें document.getElementById('#elementID').scrollIntoView()। एक तत्व का चयन करने के लिए ~ 100k पुस्तकालय लोड करने का कोई उपयोग नहीं है और फिर इसे नियमित जावास्क्रिप्ट में परिवर्तित करें।

— गैविन

62

@ गेविन मुझे यकीन है कि आपका मतलब है:document.getElementById('elementID').scrollIntoView()

— ब्रायन

3

ठंडा। लेकिन उपयोग करने से पहले, सुनिश्चित करें कि ब्राउज़र इस का समर्थन करता है। मोज़िला के अनुसार "यह एक प्रायोगिक तकनीक है"

— तेजस्वी हेगड़े

48

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

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

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

— Warface
स्रोत

$(window.location.hash)हैश के लिए काम नहीं करेगा जो jQuery के regex आईडी डिटेक्शन को पूरा करने में विफल हो। उदाहरण के लिए, हैश जिसमें संख्याएँ होती हैं। यह थोड़ा खतरनाक भी है; इनपुट के प्रारूप को मान्य किया जाना चाहिए ताकि आप एक अलग तत्व का चयन न करें।

— dchacke

35

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>

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

— davidcondrey
स्रोत

1

इसे और अधिक सार्वभौमिक बनाने के लिए और ब्राउज़र लिंक विंडो में हैशटैग के अनावश्यक रखने को हटाने के लिए मैंने कोड को नीचे दिया है:

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

— bubencode

31

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

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

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

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

— तेजस्वी हेगड़े
स्रोत

22

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

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

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

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

— रेजगर कैडरो
स्रोत

21

इस तरह से मैं यह कर रहा हूँ।

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

किसी भी ब्राउज़र में काम करता है।

इसे आसानी से एक फंक्शन में लपेटा जा सकता है

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

यहाँ एक कार्यशील उदाहरण है

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

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

डॉक्स

— Edvard vkerberg
स्रोत

6

बहुत छोटा और मीठा। ध्यान देने वाली एक बात - मुझे लगता है कि यह केवल व्यूपोर्ट के शीर्ष पर स्क्रॉल करने के बजाय इसे व्यूपोर्ट में (व्यूपोर्ट के निचले भाग में) स्क्रॉल कर सकता है, जैसा कि स्क्रॉलटॉप सेट करता है।

— ओजी सीन

20

मुझे jQuery के बिना एक तरीका पता है:

document.getElementById("element-id").scrollIntoView();

संपादित करें: दो साल हो गए हैं और मैं अभी भी इस पोस्ट lmao से बेतरतीब ढंग से प्रतिष्ठा प्राप्त कर रहा हूं

— GameMaster1928
स्रोत

18

यदि आप केवल इनपुट तत्व को स्क्रॉल कर रहे हैं, तो आप उपयोग कर सकते हैं focus()। उदाहरण के लिए, यदि आप पहले दृश्य इनपुट पर स्क्रॉल करना चाहते हैं:

$(':input:visible').first().focus();

या कक्षा के साथ एक कंटेनर में पहला दृश्यमान इनपुट .error:

$('.error :input:visible').first().focus();

यह इंगित करने के लिए ट्रिसिया बॉल का धन्यवाद !

— बेंजामिन ओक्स
स्रोत

17

इस समाधान के साथ आपको किसी भी प्लगइन की आवश्यकता नहीं है और आपके समापन टैग से पहले स्क्रिप्ट रखने के अलावा कोई सेटअप की आवश्यकता नहीं है</body> ।

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

लोड होने पर, यदि पते में कोई हैश है, तो हम उसे स्क्रॉल करते हैं।

और - जब भी आप aकिसी hrefहैश जैसे लिंक पर क्लिक करते हैं #top, तो हम उसे स्क्रॉल करते हैं।

— जोनाथन
स्रोत

यह शायद > 1इसके बजाय होना चाहिए 0, सिर्फ इसलिए कि /#इस स्क्रिप्ट को तोड़ने का कारण बनता है

— टैल्बॉय

जब तक लिंक खराब तरीके से निर्मित नहीं होते, लेकिन आप तकनीकी रूप से एक खाली हैश URL के साथ समाप्त नहीं होना चाहिए, लेकिन TY। (हालाँकि इस कोड के मेरे अपने संस्करण में यह पैच पहले से ही ^ ^ शामिल है)

— जोनाथन

इस कोड के साथ एक घबराना जुड़ा हुआ है, हालांकि यह आसानी से ठीक होने योग्य है। आप की जरूरत है return false;डिफ़ॉल्ट गतिविधि को रोकता क्लिक पर घटना के अंत में - तुरंत लंगर के लिए स्क्रॉल - ऐसा होने से।

— रोनकली

2

@ क्रॉन्ली अच्छी बात - वैकल्पिक रूप से आप बस कर सकते हैंe.preventDefault();

— जोनाथन

e.preventDefault()हालाँकि क्लिक करने पर url में hash अपडेट नहीं होता है, हमेशा बिना url के

— hasl

8

ज्यादातर मामलों में, प्लगइन का उपयोग करना सबसे अच्छा होगा। गंभीरता से। मैं यहाँ मेरा पीछा करने जा रहा हूँ । बेशक, अन्य भी हैं। लेकिन कृपया जांचें कि क्या वे वास्तव में उन नुकसानों से बचते हैं जिनके लिए आप पहली जगह पर एक प्लगइन चाहते हैं - उनमें से सभी नहीं।

मैंने कहीं और प्लगइन का उपयोग करने के कारणों के बारे में लिखा है । संक्षेप में, एक लाइनर यहाँ अधिकांश उत्तरों को रेखांकित करता है

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

बुरा है UX।

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

इन मुद्दों (और दूसरों का एक गुच्छा ) को संभालने के लिए , आप मेरा एक प्लगइन का उपयोग कर सकते हैं, jQuery.scrollable । कॉल तो बनता है

$( window ).scrollTo( targetPosition );

और बस। बेशक, अधिक विकल्प हैं ।

लक्ष्य की स्थिति के संबंध $target.offset().topमें, ज्यादातर मामलों में काम करता है। लेकिन कृपया ध्यान रखें कि लौटाया गया मान htmlतत्व के बॉर्डर को ध्यान में नहीं रखता ( यह डेमो देखें )। यदि आपको किसी भी परिस्थिति में सटीक होने के लिए लक्ष्य की स्थिति की आवश्यकता है, तो इसका उपयोग करना बेहतर है

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

यह तब भी काम करता है जब htmlतत्व पर बॉर्डर सेट किया गया हो।

— hashchange
स्रोत

8

एनिमेशन:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

8

यदि आप एक अतिप्रवाह कंटेनर के भीतर स्क्रॉल करना चाहते हैं ( $('html, body')ऊपर वर्णित के बजाय ), पूर्ण स्थिति के साथ भी काम करना, यह करने का तरीका है:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

— FAjir
स्रोत

7

Div id को टारगेट करने के लिए पेज को स्क्रॉल करने का आसान तरीका

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

— इरशाद खान
स्रोत

6

यह एक सामान्य श्रेणी चयनकर्ता का उपयोग करते हुए, आईडी और href का सार है

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

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

— vascogaspar
स्रोत

6

कस्टम jQuery प्लगइन का उपयोग करने के लिए बहुत सरल और आसान है। बस विशेषता जोड़ेंscroll= अपने क्लिक करने योग्य तत्व और उस मान को चयनकर्ता पर सेट करें जिसे आप स्क्रॉल करना चाहते हैं।

इसलिए जैसा: <a scroll="#product">Click me</a>। इसका उपयोग किसी भी तत्व पर किया जा सकता है।

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

— DevWL
स्रोत

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

— kayz1
स्रोत

4

$('html, body').animate(...) iPhone, Android क्रोम सफारी ब्राउज़र पर मेरे लिए नहीं है।

मुझे पृष्ठ के मूल सामग्री तत्व को लक्षित करना था।

$ ( '# Cotnent')। चेतन (...)

यहाँ मैं के साथ समाप्त हो गया है

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

पूरे शरीर की सामग्री एक # कॉन्टेंट डिव के साथ उठती है

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

— शहादत
स्रोत

आप वास्तव में उपयोगकर्ता एजेंट सूँघने का उपयोग नहीं करना चाहिए। webaim.org/blog/user-agent-string-history

— एलेक्स पॉडवॉर्नी

शब्द-विराम जोड़ें: विराम-सब; आपके सीएसएस तत्व जो मुसीबत में है। Android / iOS वेबव्यू jQuery.animate ({स्क्रॉलटॉप: y}) स्थिति गलत है। medium.com/@ellery.leung/…

— दलियासैम

4

यह अथर्व का उत्तर है: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView । बस यह जोड़ना चाहता था कि यदि आपका दस्तावेज़ आईफ्रेम में है, तो आप देखने के लिए स्क्रॉल करने के लिए मूल फ़्रेम में एक तत्व चुन सकते हैं:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

— cynya
स्रोत

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

3

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

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

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

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

focusफंक्शन की एनीमेशन का उपयोग करने का यह फैशन एक बेहतर तरीके से, focusकॉलिंग कॉलिंग के माध्यम से कर सकता है। मैंने इस सिद्धांत का परीक्षण नहीं किया है, लेकिन यह कुछ इस तरह दिखाई देगा:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

— Khaled.K
स्रोत

3

मैंने एक मॉड्यूल स्क्रॉल-तत्व सेट किया है npm install scroll-element। यह इस तरह काम करता है:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

निम्नलिखित एसओ पदों से मदद के साथ लिखा गया है:

यहाँ कोड है:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

— svnm
स्रोत

2

पूर्ण तत्व दिखाने के लिए (यदि यह वर्तमान विंडो आकार के साथ संभव है):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

— रोमन शमरित्सकी
स्रोत

2

मैंने एक सामान्य उद्देश्य फ़ंक्शन लिखा है जो या तो एक jQuery ऑब्जेक्ट, एक सीएसएस चयनकर्ता, या एक संख्यात्मक मान तक स्क्रॉल करता है।

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

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

फ़ंक्शन का कोड:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

— isapir
स्रोत

2

इसके लायक क्या है, यह है कि मैं एक सामान्य तत्व के लिए इस तरह के व्यवहार को प्राप्त करने में कामयाब रहा, जो स्क्रॉल के साथ एक डीआईवी के अंदर हो सकता है। हमारे मामले में हम पूरे शरीर को स्क्रॉल नहीं करते हैं, लेकिन अतिप्रवाह के साथ सिर्फ विशेष तत्व: ऑटो; एक बड़े लेआउट के भीतर।

यह लक्ष्य तत्व की ऊंचाई का एक फर्जी इनपुट बनाता है, और फिर उस पर ध्यान केंद्रित करता है, और ब्राउज़र बाकी के बारे में ध्यान रखेगा कि आप कितने स्क्रॉल किए गए पदानुक्रम के भीतर कितने गहरे हैं। एक जादू की तरह काम करता है।

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

— martinh_kentico
स्रोत

2

यह मेरे लिए काम किया:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

— पोलारिस
स्रोत

2

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>

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

— Minguocode
स्रोत

2

एक लाइन

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

कोड स्निपेट दिखाएं

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

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

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>

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

— कामिल कियॉलेजवस्की
स्रोत

1

यह पूरी तरह से काम करता है!

— jjoselon

1

2019 तक अपडेट किया गया उत्तर:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

— stardust4891
स्रोत

आपको बॉडी के लिए यह चयनकर्ता होना चाहिए: [document.documentElement, document.body] और समीकरण में बॉडी ऑफसेट की आवश्यकता नहीं है। $ ('# विषय')। ऑफसेट ()। शीर्ष पर्याप्त है।

— एलिऐप 6