मैं jquery का उपयोग करके पृष्ठ पर किसी विशिष्ट स्थान पर कैसे स्क्रॉल कर सकता हूं?

Question

क्या jQuery का उपयोग करके पृष्ठ पर किसी विशिष्ट स्थान पर स्क्रॉल करना संभव है?

जिस स्थान पर मुझे स्क्रॉल करना है, वह स्थान है:

<a name="#123">here</a>

या यह सिर्फ एक विशिष्ट DOM आईडी पर जा सकता है?

Comments

सिर्फ एक छोटा सा नोट: XHTML 1.1 स्ट्रिक्ट में "नाम" की अनुमति नहीं है, इसके बजाय एक आईडी का उपयोग करें

— Juraj Blahunka

दिलचस्प सवाल, स्क्रॉल करने के लिए पेज निर्देशांक का उपयोग नहीं कर सकते हैं? मुझे लगता है कि हमें सक्षम होना चाहिए।

— उमर आबिद

मुझे आपकी आवश्यकता के समान समाधान मिला [यहाँ] [१] [१]: stackoverflow.com/questions/3432656/…

— user1493023

@mrblah आपकी समस्या का समाधान करता है?

— मेघदाद हदीदी

Answer 1

jQuery स्क्रॉल प्लगइन

चूँकि यह jquery के साथ टैग किया गया एक प्रश्न है , जिसका मुझे कहना है, कि इस लाइब्रेरी में चिकनी स्क्रॉलिंग के लिए एक बहुत अच्छा प्लगइन है, आप इसे यहाँ पा सकते हैं: http://plugins.jquery.com/scrollTo/

दस्तावेज़ीकरण के कुछ अंश:

$('div.pane').scrollTo(...);//all divs w/class pane

या

$.scrollTo(...);//the plugin will take care of this

स्क्रॉल करने के लिए कस्टम jQuery फ़ंक्शन

आप अपने कस्टम स्क्रॉल jquery फ़ंक्शन को परिभाषित करके बहुत हल्के दृष्टिकोण का उपयोग कर सकते हैं

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

और इसका उपयोग करें:

$('#your-div').scrollView();

एक पृष्ठ निर्देशांक तक स्क्रॉल करें

चेतन htmlऔर bodyसाथ तत्व scrollTopया scrollLeftगुण

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

सादा जावास्क्रिप्ट

के साथ स्क्रॉल करना window.scroll

window.scroll(horizontalOffset, verticalOffset);

केवल योग करने के लिए, ID के साथ तत्व पर जाने के लिए window.location.hash का उपयोग करें

window.location.hash = '#your-page-element';

सीधे HTML में (accesibility संवर्द्धन)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Comments

धन्यवाद @Juraj Blahunka, लेकिन मैं बिना किसी प्लगइन के ऐसा करता हूँ

— मेघदाद हदीदी

लिंक मुझे स्क्रोल्टो में नहीं ले जा रहा है । क्या आप कृपया इसे अपडेट कर सकते हैं?

— बारना टेकसे

इसका उत्तर होना चाहिए!

— नीलमेग

Answer 2

हां, सादे जावास्क्रिप्ट में भी यह बहुत आसान है। आप किसी तत्व को एक आईडी देते हैं और फिर आप उसे "बुकमार्क" के रूप में उपयोग कर सकते हैं:

<div id="here">here</div>

यदि आप चाहते हैं कि जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करे तो आप उसे स्क्रॉल कर सकते हैं, तो आप बस कोशिश की हुई और सही विधि का उपयोग कर सकते हैं:

<a href="#here">scroll to over there</a>

इसे प्रोग्रामेटिक रूप से करने के लिए, उपयोग करें scrollIntoView()

document.getElementById("here").scrollIntoView()

Comments

@nickf यह अभी तक हर जगह समर्थित नहीं है। caniuse.com/#search=scrollIntoView

— आदित्य सिंह

यह मैंने समर्थित ( developer.mozilla.org/en-US/docs/Web/API/Element/scrollInnView ) को हराया । लगता है कि आपने कैनियस को ठीक से नहीं पढ़ा है। हालाँकि, एनिमेटेड नहीं होगा। बल्कि एक बहुत ही अचानक कूद जो हमेशा महान नहीं है।

— पेरी

Answer 3

किसी भी प्लगइन का उपयोग करने की आवश्यकता नहीं है, आप इसे इस तरह से कर सकते हैं:

var divPosition = $('#divId').offset();

इसके बाद दस्तावेज़ को विशिष्ट DOM पर स्क्रॉल करने के लिए इसका उपयोग करें:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Comments

+1 यह शायद सबसे अच्छा जवाब है। ज्यादा कोड नहीं है और एक प्लगइन की आवश्यकता नहीं है।

— ट्रिक 12

ध्यान दें कि आपको विंडो के आकार पर ऑफ़सेट को पुनर्गणना करने की आवश्यकता हो सकती है।

— बार्ट बर्ग

@BartBurg अच्छा बिंदु - या सिर्फ .animateकॉल होने से ठीक पहले पुनर्गणना

— mikermcneil

सरल उत्तर से प्यार करें। लोगों को चीजों को इतना जटिल क्यों बनाना पड़ता है? एक और प्लगइन नहीं चाहिए।

— स्टेरफ्री 68

वास्तव में सबसे अच्छा जवाब।

— रॉबर्ट रॉस

Answer 4

यहाँ एक शुद्ध जावास्क्रिप्ट संस्करण है:

location.hash = '#123';

यह अपने आप स्क्रॉल होगा। "#" उपसर्ग जोड़ना याद रखें।

Comments

नामित एंकर के आदिम तरीके का उपयोग करते हुए, आपके पास URL हो सकता है जिसमें हैश एग mywebsite.com/page-about/#123 बुकमार्क शामिल है जिसमें हैश + स्क्रॉलिनव्यू व्यवहार भी शामिल है।

— 23

बहुत अच्छा होगा यदि आप थोड़ा समझा सकते हैं

— JGallardo

Answer 5

सादा जावास्क्रिप्ट:

window.location = "#elementId"

Answer 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

यह उदाहरण इस मामले में एक विशेष div आईडी, 'idVal' का पता लगाने के लिए दिखाता है। यदि आपके पास बाद की divs / tables हैं जो इस पेज में ajax के माध्यम से खुलेंगे, तो आप अद्वितीय divs असाइन कर सकते हैं और div की प्रत्येक सामग्री के लिए विशेष स्थान पर स्क्रॉल करने के लिए स्क्रिप्ट को कॉल कर सकते हैं।

आशा है कि यह उपयोगी होगा।

Answer 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Comments

यदि आप अपने कोड में कुछ टिप्पणियां जोड़ते हैं तो यह बहुत अच्छा होगा। यह प्रश्नकर्ता को उनके प्रश्न को हल करने में कैसे मदद करता है?

— आर्टेमिक्स

Answer 8

इसे इस्तेमाल करे

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 9

यहाँ @ juraj-blahunka का हल्का दृष्टिकोण है । यह फ़ंक्शन ग्रहण नहीं करता है कि दस्तावेज़ दस्तावेज़ है और केवल स्क्रॉल होता है यदि आइटम दृश्य से बाहर है। अनावश्यक उछल से बचने के लिए एनिमेशन कतार भी अक्षम है।

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};

Comments

मेरे पास उछाल का मुद्दा था, लेकिन आपका तरीका काम नहीं करता है

— Anon

Answer 10

Jquery.easing.min.js का उपयोग करके, निश्चित IE कंसोल त्रुटियों के साथ

एचटीएमएल

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

jQuery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });

Comments

इस तरह से इस तरह के एक सरल कार्य के लिए बहुत अधिक कोड है। location.hash = 'idOfElement';पर्याप्त होना चाहिए

— Kolob Canyon

Answer 11

आप इसे scroll-behavior: smooth;जावास्क्रिप्ट के बिना प्राप्त करने के लिए उपयोग कर सकते हैं

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Comments

स्क्रॉल-व्यवहार: चिकनी; ब्राउज़र संगत संपत्ति नहीं है।

— सुपर मॉडल

- ब्राउज़र संगतता कम में लिंक की जांच developer.mozilla.org/en-US/docs/Web/CSS/...

— साईराम

आपके लिंक में दी गई तालिका दिखा रही है: एज, IE और सफारी इस संपत्ति के साथ संगत नहीं हैं।

— सुपर मॉडल