JQuery का उपयोग करके विशिष्ट आइटम पर स्क्रॉल कैसे करें?

Question

मेरे पास वर्टिकल स्क्रॉल बार के साथ एक बड़ी टेबल है। मैं इस तालिका में jQuery / जावास्क्रिप्ट का उपयोग करके एक विशेष लाइन पर स्क्रॉल करना चाहूंगा।

क्या ऐसा करने के लिए अंतर्निहित तरीके हैं?

यहाँ थोड़ा उदाहरण के साथ खेलना है।

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

Answer 1

मृत सरल। कोई प्लगइन्स की जरूरत है ।

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

यहाँ एक कार्य उदाहरण है ।

के लिए प्रलेखनscrollTop ।

Comments

यदि कंटेनर में एक स्क्रॉलबार है, तो आपको स्क्रॉलटॉप के लिए खाते की आवश्यकता होगी: स्क्रॉलट.ऑफसेट ()। शीर्ष

— कंटेनर.ऑफसेट

आप पूरी विंडो को $ (दस्तावेज़) .scrollTop (मान) के साथ स्क्रॉल कर सकते हैं - अंतर्निहित jquery कोड आपके लिए ब्राउज़र समस्याओं को हल करता है।

— क्रिस मोसचिनी

यदि आप scrollToशीर्ष पर के बजाय केंद्रित चाहते हैं :scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)

— Mahn

element.scrollIntoView()- बस इतना ही चाहिए। एनीमेशन मानकीकृत है। डेवलपर

— ..millailla.org

ध्यान दें कि कोड ब्लॉक के बहुत अंत में "अदृश्य" वर्ण है। चरित्र को एज, क्रोम में अमान्य माना जाता है। - एक कॉपी-

— पेस्टर

Answer 2

मुझे लगता है कि यह एक कंटेनर में स्क्रॉल करने का जवाब नहीं है, लेकिन लोग इसे उपयोगी पा रहे हैं:

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

हम HTML और शरीर दोनों का चयन करते हैं क्योंकि दस्तावेज़ स्कोरर दोनों पर हो सकता है और यह निर्धारित करना कठिन है। आधुनिक ब्राउज़रों के लिए आप दूर जा सकते हैं $(document.body)।

या, पृष्ठ के शीर्ष पर जाने के लिए:

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

या एनीमेशन के बिना:

$(window).scrollTop(some_element.offset().top);

या ...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

Comments

हैलो @infanim आप मुझे इस कारण का एक काम कर उदाहरण दे सकते हैं मेरा काम नहीं कर रहा है? मैंने var सेक्शन 2 = $ ('# सेक्शन -2') का उपयोग किया; $ ('html, बॉडी')। चेतन ({स्क्रॉलटॉप: सेक्शन 2.ऑफ़सेट ()। शीर्ष});

— dll_onFire

यह ठीक लग रहा है - क्या आप सुनिश्चित हैं कि अनुभाग 2 मौजूद है? कंसोल। क्लॉग (सेक्शन 2. लर्निंग); और यह सुनिश्चित करें कि यह 0. नहीं है। एक छोटे से एक उदाहरण बना देगा।

— डोमिनिक

क्यों $('html,body')? उसे केवल विशिष्ट कंटेनर में चाहिए। स्वीकृत उत्तर मेरे लिए बेहतर है। मेरे पास इसी तरह का मामला है जैसे पूछे गए सवाल और आपका जवाब मेरे लिए काम नहीं करता है।

— पेट्रॉफ

@Prroff अजीब तरह से जब मैंने यह लिखा था कि मैंने नोटिस नहीं किया था कि तत्व एक स्क्रॉलिंग कंटेनर में था। हालांकि मैं अपना जवाब छोड़ दूंगा क्योंकि यह सवाल शीर्षक के कारण शरीर को स्क्रॉल करने के लिए Google खोज से लोग यहां आते हैं

— डोमिनिक

Answer 3

मैं केविन और अन्य लोगों से सहमत हूं, इसके लिए एक प्लगइन का उपयोग करना व्यर्थ है।

window.scrollTo(0, $("#element").offset().top);

Comments

कुछ के लिए जो इतना सरल होना चाहिए मैंने ऑनलाइन अन्य समाधानों पर उम्र बिताई है, लेकिन यह सरल एक लाइनर वही करता है जो मुझे चाहिए।

— लारेंस कोप

यह ध्यान दिया जाना चाहिए, यह तरीका पूरी विंडो के लिए काम करता है। यदि आप ऐसी सामग्री को स्क्रॉल करना चाहते हैं जिसमें अतिप्रवाह है: स्क्रॉल करें तो यह काम नहीं करेगा।

— जेरेमी

Answer 4

मैं इसे खुद करने में कामयाब रहा। किसी भी प्लगइन्स की आवश्यकता नहीं है। मेरा लिंग देखें :

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

Comments

एनीमेशन के साथ पूरा आपका एक-लाइन का जिस्ट, वही था जिसकी मुझे ज़रूरत थी। धन्यवाद!

— स्कॉट स्मिथ

No need for any plugins?? लेकिन आप jQuery का उपयोग करें! यह विशाल पुस्तकालय, एक प्लगइन भी नहीं है।

— ग्रीन

मुझे लगता है कि आपको jquery लाइब्रेरी के संदर्भ के अलावा एक पुनरावृत्ति जोड़ने की आवश्यकता नहीं है। प्लस jquery एक तरह का उद्योग मानक है। आप इसका उपयोग क्यों नहीं करेंगे? यह शायद jquery के बिना काफी उल्लेखनीय है, लेकिन यह अभी भी किसी को पार्सिंग भाग के लिए बहुत सारे कोड लिखने की आवश्यकता होगी। यह उल्टा लगता है। और यह खसरा div तक स्क्रॉल करने के लिए प्लगइन पर एक पूर्ण लिखने के लिए उल्टा महसूस किया।

— लॉर्डरडक

Answer 5

आप scrollIntoView()जावास्क्रिप्ट में विधि का उपयोग कर सकते हैं । अभी दोid.scrollIntoView();

उदाहरण के लिए

row_5.scrollIntoView();

Comments

इसे कैसे चेतन करें?

— ग्रीन

चेतन को कोई जरूरत नहीं है। जब आप स्क्रॉल इनटू व्यू () का उपयोग करते हैं, तो इसे दृश्य में प्रदर्शित करने के लिए नियंत्रण स्वचालित रूप से स्क्रॉल हो जाएगा।

— तमिलारसी

Answer 6

आप jQuery स्क्रॉलआउट प्लगइन प्लगइन का उपयोग कर सकते हैं :

$('div').scrollTo('#row_8');

Comments

लिंक अब और उपलब्ध नहीं है। क्या आप इसे अपडेट कर सकते हैं?

— लकी

Answer 7

कंटेनर के केंद्र तक स्क्रॉल तत्व

तत्व को कंटेनर के केंद्र में लाने के लिए।

CODEPEN पर DEMO

जे एस

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

एचटीएमएल

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

सीएसएस

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

यह केंद्र के लिए सटीक नहीं है, लेकिन आप इसे बड़े तत्वों पर नहीं पहचानेंगे।

Answer 8

आप jQuery और जावास्क्रिप्ट द्वारा स्क्रॉल कर सकते हैं बस दो तत्व jQuery और इस जावास्क्रिप्ट कोड की आवश्यकता है:

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").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
    }, 1500);
  });
});

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").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
    }, 1500);
  });
});

#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>

Answer 9

मैंने जो कुछ पोस्ट किया है उसका संयोजन मैंने किया। इसकी सरल और चिकनी

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

Comments

यदि स्थिति () सभी ब्राउज़रों में क्रियाशील है तो @ AnriëtteMyburgh im अनिश्चित। क्या आपने इसे दूसरों में देखने की कोशिश की है कि क्या यह काम करता है? या क्या मैं आपके द्वारा उपयोग किए जा रहे कोड को देख सकता हूं और देख सकता हूं कि क्या कुछ और गलत है?

— Nlinscott

Answer 10

निश्चित नहीं है कि कोई भी स्पष्ट क्यों नहीं कहता है, क्योंकि यह जावास्क्रिप्ट scrollToफ़ंक्शन में बनाया गया है:

scrollTo( $('#element').position().top );

संदर्भ ।

Comments

स्क्रोल्टो को दो तर्कों की आवश्यकता है, आपने केवल एक में लिखा है।

— न्यूक्लियरपॉन

... और इसे विंडो ऑब्जेक्ट पर कहा जाता है।

— हैशचेंज

Answer 11

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

मैंने वर्षों में कई प्लगइन्स की कोशिश की है, लेकिन आखिरकार खुद को लिखा है। आप इसे एक स्पिन देना चाह सकते हैं: jQuery.scrollable । इसका उपयोग करते हुए, स्क्रॉल क्रिया बन जाती है

$container.scrollTo( targetPosition );

लेकिन वह सब नहीं है। हमें लक्ष्य की स्थिति भी ठीक करनी होगी। अन्य उत्तरों में आपके द्वारा देखी गई गणना,

$target.offset().top - $container.offset().top + $container.scrollTop()

ज्यादातर काम करता है लेकिन पूरी तरह से सही नहीं है। यह स्क्रॉल कंटेनर की सीमा को ठीक से नहीं संभालता है। लक्ष्य तत्व को सीमा के आकार से बहुत ऊपर की ओर स्क्रॉल किया जाता है। यहाँ एक डेमो है।

इसलिए, लक्ष्य स्थिति की गणना करने का एक बेहतर तरीका है

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

फिर से, इसे कार्रवाई में देखने के लिए डेमो देखें।

एक फ़ंक्शन के लिए जो लक्षित स्थिति लौटाता है और दोनों खिड़की और गैर-खिड़की स्क्रॉल कंटेनर के लिए काम करता है, इस जिस्ट का उपयोग करने के लिए स्वतंत्र महसूस करता है । वहां की टिप्पणियां बताती हैं कि स्थिति की गणना कैसे की जाती है।

शुरुआत में, मैंने कहा है कि एनिमेटेड स्क्रॉलिंग के लिए एक प्लगइन का उपयोग करना सबसे अच्छा होगा । आप एक प्लगइन की जरूरत नहीं है, हालांकि, अगर आप एक संक्रमण के बिना लक्ष्य के लिए कूदना चाहते हैं। उस के लिए @James द्वारा जवाब देखें , लेकिन सुनिश्चित करें कि आप कंटेनर के चारों ओर एक सीमा है, तो लक्ष्य स्थिति की सही गणना करें।

Answer 12

यह किस लायक है, इसके लिए मैंने एक सामान्य तत्व के लिए ऐसा व्यवहार प्राप्त करने में कामयाबी हासिल की, जो स्क्रॉल (कंटेनर के बिना) के साथ एक DIV के अंदर हो सकता है

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

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

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

Answer 13

मैंने यह संयोजन किया। मेरे लिए इसका काम है। लेकिन एक समस्या का सामना करना पड़ रहा है, तो क्लिक करें कि div आकार बहुत बड़ा है कि scenerio स्क्रॉल इस विशेष div के लिए नीचे नहीं।

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }