Jquery का उपयोग करके एक div पर स्क्रॉल करें

205

इसलिए मेरे पास एक पेज है जो साइड में एक निश्चित लिंक बार है। मुझे अलग-अलग डीवाज़ को स्क्रॉल करना है। मूल रूप से पृष्ठ सिर्फ एक लंबी वेबसाइट है, जहां मैं मेनू बॉक्स का उपयोग करके अलग-अलग divs पर स्क्रॉल करना चाहता हूं।

यहाँ मैं अब तक jquery है

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

समस्या यह है कि जब यह लोड होता है तो यह स्वचालित रूप से संपर्क विभाग में जा रहा है, फिर जब मैं #contactlinkमेनू में इसे दबाता हूं तो यह शीर्ष पर वापस स्क्रॉल करता है।

संपादित करें: HTML 

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

सहायता के लिए धन्यवाद

jquery  scroll 
— tshauck
स्रोत
Html वह कहाँ दिखता है जहाँ संपर्क लिंक होना चाहिए?
— जेम्स ब्लैक
— जेम्स ब्लैक
3
क्या कोई कारण है जो आप सादे पुराने एंकरों के बजाय jQuery का उपयोग कर रहे हैं?
— ब्रायनपीरीस
2
@ नाम - यह वास्तव में डुप्लिकेट नहीं है। यह प्रश्न किसी पृष्ठ को विशिष्ट divs तक स्क्रॉल करता है। यह प्रश्न किसी पृष्ठ को परिभाषित वृद्धि (चाहे जो भी दिखा रहे हों) को स्क्रॉल करता है।
— पीटर Ajtai
यह वास्तव में अच्छा है: css-tricks.com/snippets/jquery/smooth-scrolling । मेरे लिए काम किया।
— माहद

जवाबों:

342

पहले, आपके कोड में एक contactdiv नहीं है , यह एक contactsdiv है!

साइडबार में आपके पास contactपृष्ठ के निचले भाग में div है contacts। मैंने sकोड नमूने के लिए अंतिम हटा दिया । (आपने projectslinkसाइडबार में आईडी को भी गलत बताया )।

दूसरा, jQuery के संदर्भ पृष्ठ पर क्लिक करने के लिए कुछ उदाहरण देखें । आप क्लिक उपयोग करने के लिए की तरह है, object.click( function() { // Your code here } );नीचे मेरी उदाहरण में वस्तु के लिए क्लिक करें ईवेंट हैंडलर .... जैसा बाध्य करने के लिए आदेश में। एक तरफ के रूप में, आप भी बिना किसी तर्क के उपयोग करके किसी ऑब्जेक्ट पर क्लिक को ट्रिगर कर सकते हैं, जैसे object.click()।

तीसरा, jQuery में scrollToएक प्लगइन है। मुझे पता नहीं है कि आपके पास प्लगइन स्थापित है या नहीं। आप scrollTo()प्लगइन के बिना उपयोग नहीं कर सकते । इस स्थिति में, आप जो कार्यक्षमता चाहते हैं, वह कोड की केवल 2 पंक्तियाँ हैं, इसलिए मुझे प्लगइन का उपयोग करने का कोई कारण नहीं दिखता है।

ठीक है, अब एक समाधान पर।

यदि आप साइडबार में लिंक पर क्लिक करते हैं, तो नीचे दिया कोड सही div पर स्क्रॉल करेगा। स्क्रॉल करने की अनुमति देने के लिए विंडो को काफी बड़ा होना चाहिए:

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

लाइव उदाहरण

( यहां से कार्य करने के लिए स्क्रॉल करें )

पुनश्च: स्पष्ट रूप से आपके पास लंगर टैग का उपयोग करने के बजाय इस मार्ग पर जाने के लिए एक सम्मोहक कारण होना चाहिए <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— पीटर अज़ताई
स्रोत
यह जानकर खुशी हुई कि इसने मदद की, लेकिन मुझे लगता है कि आपको "अचार" से मतलब है, हालांकि मुझे लगता है कि इनका सेवन करना बेहतर है ताकि आप इनसे बाहर निकल सकें।
— पीटर अज़ताई
यह पहले क्लिक पर स्क्रॉल नहीं करता है। : / मैं इसे दूसरी बार क्लिक करता हूं और यह काम करता है।
— बुरक करकुस
मुझे लगता है कि आईडी को इस तरह से रखना अधिक तर्कसंगत है: href = "# के बारे में" jsfiddle.net/onigetoc/w5muyern
— Gino
यह पहली बार में काम नहीं करता है। लेकिन जब हम 2 बार क्लिक करते हैं तो इसका काम पूरी तरह से होता है।
— सतीश सिंह
115

.scrollTo()JQuery में कोई विधि नहीं है , लेकिन .scrollTop()एक है। .scrollTopएक पैरामीटर की अपेक्षा करता है, अर्थात्, पिक्सेल मूल्य जहां स्क्रॉलबार को स्क्रॉल करना चाहिए।

उदाहरण:

$(window).scrollTop(200);

विंडो को स्क्रॉल करेगा (यदि इसमें पर्याप्त सामग्री है)।

तो आप इस वांछित मूल्य के साथ .offset()या प्राप्त कर सकते हैं .position()।

उदाहरण:

$(window).scrollTop($('#contact').offset().top);

यह #contactतत्व को दृश्य में स्क्रॉल करना चाहिए ।

गैर- jQuery वैकल्पिक विधि है .scrollIntoView()। आप उस विधि को किसी भी DOM elementतरह से कॉल कर सकते हैं:

$('#contact')[0].scrollIntoView(true);

trueइंगित करता है कि तत्व शीर्ष पर स्थित है, जबकि falseइसे दृश्य के निचले भाग पर रखा जाएगा। JQuery विधि के साथ अच्छी बात यह है, आप इसे fx functionsपसंद के साथ भी उपयोग कर सकते हैं .animate()। तो आप कुछ स्क्रॉल कर सकते हैं।

संदर्भ: .scrollTop () ,। स्थिति () , .offset ()

— JANDY
स्रोत
मुझे डर है कि मुझे अभी भी इसी तरह की समस्या हो रही है। पेज लोड पेज को एक निश्चित राशि से नीचे स्क्रॉल करता है, न कि कॉन्टेक्ट डिव थू, और लिंक मुझे कॉन्टेक्ट डिव तक नहीं ले जाता है। धन्यवाद थो। संपादित करें: कहते हैं कि मैं सीएसएस के साथ शीर्ष का उपयोग करके divs को फैला रहा हूं, क्या इससे गलत जगह पर जाना होगा? सिर्फ एक विचार।
— tshauck
22

तुम कोशिश कर सकते हो : 

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top 
    }, 2000);
});
— आईटी Vlogs
स्रोत
13

इस छोटे से फ़ंक्शन को जोड़ें और इसे इस प्रकार उपयोग करें: $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});
— रयान
स्रोत
6

ठीक है दोस्तों, यह एक छोटा सा उपाय है, लेकिन यह ठीक काम करता है।

निम्नलिखित कोड मान लें:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

आप चाहते हैं कि जब कोई नया पोस्ट 'the_div_holder' में जोड़ा जाए, तो यह अपनी आंतरिक सामग्री (div's .post) को चैट की तरह अंतिम पर स्क्रॉल करता है। जब भी कोई नया .post मुख्य div धारक में जोड़ा जाता है, तो निम्न कार्य करें:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));
— ईसाई
स्रोत
3

सबसे पहले div एलिमेंट की पोजिशन प्राप्त करें, जिसे आप jQuery स्थिति () विधि से स्क्रॉल करना चाहते हैं।
उदाहरण: var pos = $ ("div")। स्थिति ();
फिर " .top " विधि के साथ उस तत्व के y कॉर्डिनेट (ऊंचाई) प्राप्त करें ।
उदाहरण: pos.top;
फिर " .left " विधि के साथ उस div तत्व के x कॉर्डिनेट प्राप्त करें ।
ये तरीके CSS पोजीशनिंग से उत्पन्न हुए हैं।
एक बार जब हम x & y कॉर्डिनेट प्राप्त कर लेते हैं, तो हम जावास्क्रिप्ट के स्क्रॉलटो () का उपयोग कर सकते हैं ; तरीका।
यह विधि दस्तावेज़ को विशिष्ट ऊँचाई और चौड़ाई तक स्क्रॉल करती है।
यह x और y कॉर्डिनेट के रूप में दो पैरामीटर लेता है। सिंटैक्स: window.scrollTo (x, y);
तो बस स्क्रॉल तत्व () फ़ंक्शन में DIV तत्व के x और y कॉर्डिनेट पास करें ।
↓ ↓ के नीचे उदाहरण देखें

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>
— सय्यद सलमान
स्रोत
और हाय, आपने जो कुछ भी किया, उसके बारे में कुछ व्याख्या की है, इससे बहुत मतलब नहीं है .. !!
— क्लैन डीसिल्वा
जैसा कि @ClainDsilva ने कहा, कृपया कुछ पाठ्य विवरण जोड़ें।
— श्रीकांतजीएस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.