Div jQuery के लिए चिकनी स्क्रॉल

Question

मैं सही ढंग से काम करने के लिए id jquery कोड को स्क्रॉल करने की कोशिश कर रहा हूं। एक और स्टैक ओवरफ्लो प्रश्न के आधार पर मैंने निम्नलिखित प्रयास किया

डेमो http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

लेकिन यह काम नहीं किया। यह सिर्फ div को झपकी लेता है। मैंने भी कोशिश की

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

बिना किसी प्रगति के।

Comments

क्या आपने इस पर ध्यान दिया है? stackoverflow.com/questions/3432656/…

— वेनिला थ्रिला

@ TheVanillaThrilla मैंने किया, लेकिन यह एक लिंक के उपयोग के लिए बहुत फूला हुआ लग रहा था

— स्टीवनहैप

@StevenPHP, मैंने अपने उदाहरण में मेरे जवाब stackoverflow.com/a/26129950/947687 के अनुसार जावास्क्रिप्ट कोड को बदल दिया है । और यह jsfiddle.net/8tLdq/643 पर काम करता है ।

— dizel3d

ओपी पुराना है लेकिन मैं इस पोस्ट को एसई से आने वाले अन्य लोगों के लिए साझा करूंगा। यहाँ एक लेख है जो समस्या को हल करने वाले एक साधारण कार्य को साझा करता है: smartik.ws/2015/01/…

— एंड्रयू

Answer 1

आपको चेतन करने की आवश्यकता है html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

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

Comments

@vector मेरे पास एक मुद्दा है, एक बार क्लिक करने पर मुझे स्क्रॉल करने के लिए jquery से लड़ना पड़ता है, कोई समाधान?

— YesItsMe

@yesitsme ... मेरे मामले में ऊपर या नीचे

— ग्रे स्पेक्ट्रम

@GraySpectrum केवल, क्लिक करने के बाद ही सही, लगता है जैसे देरी हो रही है।

— YesItsMe

मेरा एक ही सवाल है, क्या होगा अगर मेरे पास कुछ बटन हैं जिन्हें विभिन्न स्थानों पर स्क्रॉल करने की आवश्यकता है, इस कोड को संशोधित करने की कोशिश की गई लेकिन यह काम नहीं करता है। क्या आप कृपया एक और उदाहरण प्रदान कर सकते हैं?

— Dreadlord

इसके लिए कुछ "फिक्स" मिला। उचित तत्व की स्क्रॉलिंग अब तय हो गई है, लेकिन फिर भी यह उसी "स्क्रॉल-टू" लक्ष्य पर क्लिक करके ऊपर और नीचे जाता है: var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });स्पष्टीकरण: .basics-contentउस मोडल का आंतरिक भाग है जिसे मैं वास्तव में स्क्रॉल करना चाहता targetहूं , इसके साथ मैं आईडी नंबर प्रदान करता हूं तत्व के ...

— रोलैंड

Answer 2

यदि आप पृष्ठ पर मानक href-id नेविगेशन को सुचारू स्क्रॉलिंग के लिए HTML मार्कअप को बदलने के बिना करना चाहते हैं , तो इसका उपयोग करें ( उदाहरण ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

Comments

यह अच्छी तरह से काम करता है, हो सकता है कि मैं सुझाव देता हूं कि एक बहुत छोटा ट्विस्ट var pos = $(id).offset().top;हो सकता हैvar pos = $id.offset().top;

— डेवी

बहुत अच्छा। यदि आप केवल यही चाहते हैं कि कुछ कड़ियों के बारे में हो (जैसा कि आपके पास जानकारी दिखाने या छिपाने के लिए कुछ है), बस उनके लिए एक वर्ग नाम जोड़ें और मैच घोषणा के अंत में अपने वर्ग का नाम (स्कोरर) कहें। (जैसे [a href) ^ = "#"]। घुमक्कड़)।

— प्राइवेट

बिना jQuery के आप कैसे करते हैं?

— वडोरेक्वेस्ट

Answer 3

यहाँ मेरा 2 सेंट है:

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

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

एचटीएमएल:

<a class="scroll" target="contact">Contact</a>

और लक्ष्य:

<h2 id="contact">Contact</h2>

Comments

यदि आप सिद्धांत की घोषणा नहीं करते हैं तो यह काम करता है।

— डेविड मार्टिंस

evalयहाँ के लिए क्या उपयोग है ?

— सेर

मुझे लगता है कि $('html, body').animateस्क्रॉल करने की आवश्यकता है

— इरशाद खान

Answer 4

यहाँ मेरा उपयोग है:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

इस एक के साथ सौंदर्य यह है कि आप प्रत्येक के लिए एक नई स्क्रिप्ट निष्पादित करने के बिना असीमित संख्या में हैश-लिंक और संबंधित आईडी का उपयोग कर सकते हैं।

यदि आप वर्डप्रेस का उपयोग कर रहे हैं, footer.phpतो समापन बॉडी टैग से ठीक पहले अपनी थीम की फ़ाइल में कोड डालें </body>।

यदि आपके पास थीम फ़ाइलों तक पहुंच नहीं है, तो आप पोस्ट / पृष्ठ संपादक के अंदर कोड को एम्बेड कर सकते हैं (आपको पाठ मोड में पोस्ट को संपादित करना होगा) या एक पाठ विजेट पर जो सभी पृष्ठों पर लोड होगा।

यदि आप किसी अन्य CMS या सिर्फ HTML का उपयोग कर रहे हैं, तो आप उस अनुभाग में कोड सम्मिलित कर सकते हैं जो समापन बॉडी टैग से ठीक पहले सभी पृष्ठों पर लोड होता है </body>।

यदि आपको इस पर अधिक जानकारी की आवश्यकता है, तो मेरी त्वरित पोस्ट यहां देखें: jQuery की चिकनी स्क्रॉल टू आईडी

आशा है कि मदद करता है, और मुझे पता है अगर आप इसके बारे में प्रश्न हैं।

Comments

यह कितना सरल और वैनिला है, एकदम सही।

— DoPeT

Answer 5

एक उदाहरण और:

HTML लिंक:

<a href="#featured" class="scrollTo">Learn More</a>

जे एस:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML एंकर:

  <div id="featured">My content here</div>

Answer 6

क्या आप वाकई jQuery स्क्रॉलटॉ प्लगिन फ़ाइल लोड कर रहे हैं?

आपको एक ऑब्जेक्ट मिल रहा हो सकता है: विधि कंसोल में "स्क्रॉलोटो" त्रुटि नहीं मिली।

स्क्रोल्टो विधि एक देशी jquery विधि नहीं है। इसका उपयोग करने के लिए आपको jQuery स्क्रॉल टू प्लगइन फाइल को शामिल करना होगा।

रेफरी: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

सोलन: इसे हेड सेक्शन में जोड़ें।

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Comments

यह स्वीकृत उत्तर होना चाहिए था। प्रश्न में कोड सही है, और ठीक काम करता है। ऐसा लगता है कि स्क्रॉल स्क्रॉल प्लगइन काम नहीं कर रहा है / नहीं है। । उन्होंने कुछ ऐसा ही करने के विभिन्न तरीकों के बारे में नहीं पूछा।

— क्रिस कवनघ

Answer 7

यह लिपि वेक्टर से लिपि का सुधार है। मैंने इसमें थोड़ा बदलाव किया है। तो यह स्क्रिप्ट क्लास पेज-स्क्रॉल के साथ हर लिंक के लिए काम करती है।

सबसे पहले बिना सहजता के:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

आसानी के लिए आपको Jquery UI की आवश्यकता होगी:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

इसे स्क्रिप्ट में जोड़ें:

'easeOutExpo'

अंतिम

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

सभी ढीलें आप यहां पा सकते हैं: धोखा शीट ।

Answer 8

यह कोड वेब पर किसी भी आंतरिक लिंक के लिए उपयोगी होगा

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

Answer 9

यह सादे JS में किया जा सकता है:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

ब्राउज़र समर्थन थोड़ा मुद्दा है, लेकिन आधुनिक ब्राउज़र इसका समर्थन करते हैं ।

Answer 10

आप निम्न सरल jQuery कोड का उपयोग करके कर सकते हैं।

ट्यूटोरियल, डेमो, और सोर्स कोड यहाँ से पाया जा सकता है - jQuery के उपयोग से div स्क्रॉल करें

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

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

Answer 11

यहाँ मैंने यह कोशिश की, यह मेरे लिए बहुत अच्छा है।

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Comments

आपके उत्तर में क्या अलग है?

— योनांडिडस

Answer 12

यह सबसे सरल है। स्रोत- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Answer 13

यह मेरे काम आता है।

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

धन्यवाद।

Answer 14

यहाँ jQuery का उपयोग करके div / anchor को सुचारू रूप से स्क्रॉल करने का मेरा समाधान है, यदि आपके पास एक निश्चित हेडर है तो यह उसके नीचे स्क्रॉल नहीं करता है। अगर आप इसे दूसरे पेज से लिंक करते हैं तो भी यह काम करता है।

बस "हेडर-हेडर" को विभक्त करने के लिए प्रतिस्थापित करें जिसमें आपका हेडर हो।

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});