क्लिक करने के लिए विशिष्ट div पर चिकनी स्क्रॉल करें

Question

जो मैं करने की कोशिश कर रहा हूं, वह यह है कि यदि आप एक बटन पर क्लिक करते हैं, तो यह पृष्ठ पर एक विशिष्ट div तक (सुचारू रूप से) स्क्रॉल करता है।

मुझे क्या चाहिए अगर आप बटन पर क्लिक करते हैं, तो यह div 'सेकंड' तक स्क्रॉल करता है।

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

Comments

आप इस प्लगइन की कोशिश कर सकते हैं , हालांकि, यह बहुत अधिक उपयोगकर्ता के अनुकूल है। आपको बहुत अधिक बस जेएस फाइल को हेडर में लिंक करना होगा, और इसके लिए अपना मार्कअप उचित रूप से बदलना होगा।

— जोशराठके

इससे आपको मदद मिलेगी :: stackoverflow.com/questions/3432656/…

— सुधीर बस्ताकोटी

Answer 1

करना:

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

अपडेटेड Jsfiddle

Comments

क्या आप यहाँ javaScript या jQuery का उपयोग कर रहे हैं?

@FahadUddin इसके jQuery के।

— सुधीर बस्ताकोटि

@SudhirBastakoti: क्यों JsFiddle ने उस पृष्ठ पर इसके लिए jquery लाइब्रेरी को शामिल नहीं किया है?

@ सुधीर बस्ताकोटी लेकिन कई यूजर्स की शिकायत है कि यह स्मूथ स्क्रॉलिंग नहीं है।

— मौलिक

Answer 2

जेएस पुस्तकालयों जैसे jQuery, Mootools, प्रोटोटाइप, आदि का उपयोग करके चिकनी स्क्रॉल के कई उदाहरण हैं।

निम्न उदाहरण शुद्ध जावास्क्रिप्ट पर है। यदि आपके पास पृष्ठ पर कोई jQuery / Mootools / प्रोटोटाइप नहीं है या आप भारी JS पुस्तकालयों के साथ पृष्ठ को अधिभार नहीं देना चाहते हैं तो उदाहरण मदद का होगा।

http://jsfiddle.net/rjSfP/

HTML भाग:

<div class="first"><button type="button" onclick="smoothScroll(document.getElementById('second'))">Click Me!</button></div>
<div class="second" id="second">Hi</div>

सीएसएस भाग:

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

जेएस भाग:

window.smoothScroll = function(target) {
    var scrollContainer = target;
    do { //find scroll container
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do { //find the top of target relatively to the container
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    scroll = function(c, a, b, i) {
        i++; if (i > 30) return;
        c.scrollTop = a + (b - a) / 30 * i;
        setTimeout(function(){ scroll(c, a, b, i); }, 20);
    }
    // start scrolling
    scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}

Comments

मैं इसका उपयोग कर रहा हूं और यह बहुत अच्छा है। हालांकि मैं स्क्रॉल को धीमा कैसे बनाऊं?

— jamescampbell

किसी भी विचार कैसे इस कोड में तय नावबार के लिए ऑफसेट जोड़ने के लिए? यहाँ उदाहरण मैंने बनाया है बेला

— Plavookac

5 साल बाद भी मददगार

— ओवैस यूसुफी

Answer 3

मैं नीको के उत्तर के साथ थोड़ा खेलता था और वह उछलता महसूस करता था। थोड़ी जांच की और पाया window.requestAnimationFrameकि यह एक ऐसा कार्य है जिसे प्रत्येक प्रत्याहार चक्र पर कहा जाता है। यह अधिक साफ दिखने वाले एनीमेशन के लिए अनुमति देता है। फिर भी स्टेप साइज़ के लिए अच्छे डिफॉल्ट वैल्यूज़ पर हॉन करने की कोशिश कर रहा हूँ, लेकिन मेरे उदाहरण के लिए इस इम्प्लीमेंटेशन का उपयोग करके चीज़ें बहुत अच्छी लगती हैं।

var smoothScroll = function(elementId) {
    var MIN_PIXELS_PER_STEP = 16;
    var MAX_SCROLL_STEPS = 30;
    var target = document.getElementById(elementId);
    var scrollContainer = target;
    do {
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do {
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
                                 (targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

    var stepFunc = function() {
        scrollContainer.scrollTop =
            Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);

        if (scrollContainer.scrollTop >= targetY) {
            return;
        }

        window.requestAnimationFrame(stepFunc);
    };

    window.requestAnimationFrame(stepFunc);
}

Comments

@Alfonso ऊपर देखें। यह पिछले उत्तर में nico के कोड का एक अनुकूलित संस्करण है।

— नेड रॉकसन

@NedRockson मेरे लिए काम नहीं करता है सांत्वना संदेश देता है "अनकैप्ड टाइपर्रर: प्रॉपर्टी 'नहीं पढ़ सकते हैं' null के 'parentNode' लेकिन nico का कोड काम कर रहा है, मुझे क्या करना चाहिए ताकि मैं साफ एनीमेशन लागू कर सकूं?

— बजे कार्तिक वाटवानी

@KartikWatwani इसका मतलब है कि लाइन रीडिंग पर scrollContainer = scrollContainer.parentNode, स्क्रॉलकॉर्नर शून्य है। इस संभावना का मतलब है कि आप elementIdइस फ़ंक्शन को कॉल करते समय सही पास नहीं कर रहे हैं । यह भी संभव है कि आप इस स्क्रिप्ट को किसी ऐसे पृष्ठ पर चला रहे हों, जहां वह तत्व मौजूद नहीं है।

— नेड रॉकसन

@NedRockson अगर elementIdगलत होता तो मुझे @nico के उदाहरण के मामले में भी वही त्रुटि मिली होती, लेकिन उस मामले में स्क्रॉल काम कर रहा है लेकिन सुचारू रूप से नहीं।

— कार्तिक वाटवानी

जाने के requestAnimationFrameबजाय उपयोग करना है setTimeout। setTimeoutएनिमेशन के लिए उपयोग नहीं किया जाना चाहिए।

— tsnkff

Answer 4

क्या होगा अगर यू स्क्रॉल स्क्रॉल का उपयोग करें?

var elmntToView = document.getElementById("sectionId");
elmntToView.scrollIntoView(); 

क्या {व्यवहार: "चिकनी"} भी ....;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Answer 5

मैंने नेड रॉकसन के संस्करण को लिया और इसे ऊपर की ओर स्क्रॉल करने के लिए भी समायोजित किया।

var smoothScroll = function(elementId) {
  var MIN_PIXELS_PER_STEP = 16;
  var MAX_SCROLL_STEPS = 30;
  var target = document.getElementById(elementId);
  var scrollContainer = target;
  do {
    scrollContainer = scrollContainer.parentNode;
    if (!scrollContainer) return;
    scrollContainer.scrollTop += 1;
  } while (scrollContainer.scrollTop === 0);

  var targetY = 0;
  do {
    if (target === scrollContainer) break;
    targetY += target.offsetTop;
  } while (target = target.offsetParent);

  var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
    Math.abs(targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

  var isUp = targetY < scrollContainer.scrollTop;

  var stepFunc = function() {
    if (isUp) {
      scrollContainer.scrollTop = Math.max(targetY, scrollContainer.scrollTop - pixelsPerStep);
      if (scrollContainer.scrollTop <= targetY) {
        return;
      }
    } else {
        scrollContainer.scrollTop = Math.min(targetY, scrollContainer.scrollTop + pixelsPerStep);

      if (scrollContainer.scrollTop >= targetY) {
        return;
      }
    }

    window.requestAnimationFrame(stepFunc);
  };

  window.requestAnimationFrame(stepFunc);
};

Answer 6

चिकनी स्क्रॉल को प्राप्त करने के लिए आप बुनियादी सीएसएस का उपयोग कर सकते हैं

html {
  scroll-behavior: smooth;
}

Answer 7

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

var smoothScroll = function(elementId) {
    var MIN_PIXELS_PER_STEP = 16;
    var MAX_SCROLL_STEPS = 30;
    var target = document.getElementById(elementId);
    var scrollContainer = target;
    do {
        scrollContainer = scrollContainer.parentNode;
        if (!scrollContainer) return;
        scrollContainer.scrollTop += 1;
    } while (scrollContainer.scrollTop == 0);

    var targetY = 0;
    do {
        if (target == scrollContainer) break;
        targetY += target.offsetTop;
    } while (target = target.offsetParent);

    var pixelsPerStep = Math.max(MIN_PIXELS_PER_STEP,
                                 (targetY - scrollContainer.scrollTop) / MAX_SCROLL_STEPS);

    var iterations = 0;
    var stepFunc = function() {
        if(iterations > MAX_SCROLL_STEPS){
            return;
        }
        scrollContainer.scrollTop =
            Math.min(targetY, pixelsPerStep + scrollContainer.scrollTop);

        if (scrollContainer.scrollTop >= targetY) {
            return;
        }

        window.requestAnimationFrame(stepFunc);
    };

    window.requestAnimationFrame(stepFunc);
}