ক্লিকের ক্ষেত্রে নির্দিষ্ট ডিভ থেকে মসৃণ স্ক্রোল

Question 1

আমি যা করার চেষ্টা করছি তা এটি তৈরি করা যাতে আপনি যদি একটি বোতামে ক্লিক করেন তবে এটি পৃষ্ঠায় একটি নির্দিষ্ট ডিভিতে স্ক্রোল করে (সাবলীলভাবে)।

আমার যা দরকার তা হল আপনি যদি বোতামটি ক্লিক করেন তবে এটি ডিভ 'সেকেন্ড' এ মসৃণ স্ক্রোল করে।

.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>

স্নিপেট প্রসারিত করুন

Question 2

কর:

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

আপডেট করা হয়েছে Jsfiddle

Question 3

জেএসকিরি, মটুলস, প্রোটোটাইপ ইত্যাদি জেএস লাইব্রেরি ব্যবহার করে মসৃণ স্ক্রোলিংয়ের অনেকগুলি উদাহরণ রয়েছে

নিচের উদাহরণটি খাঁটি জাভাস্ক্রিপ্টে রয়েছে। আপনার যদি পৃষ্ঠায় কোনও jQuery / মোটুলস / প্রোটোটাইপ না থাকে বা ভারী জেএস লাইব্রেরি সহ পৃষ্ঠাটি ওভারলোড করতে না চান তবে উদাহরণটি সহায়ক হবে।

http://jsfiddle.net/rjSfP/

এইচটিএমএল অংশ:

<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);
}

Question 4

আমি নিকোর উত্তরটি নিয়ে কিছুটা খেললাম এবং তা খুব ঝাপটায় লাগছিল। কিছুটা তদন্ত করেছিল এবং খুঁজে পেয়েছি 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);
}

Question 5

আপনি যদি স্ক্রোলইন্টোভিউ ফাংশনটি ব্যবহার করেন?

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

এর {আচরণ: "মসৃণ"} এছাড়াও ....;) https://developer.mozilla.org/en-US/docs/Web/API/Element/scrolIntoView

Question 6

আমি নেড রকসনের সংস্করণটি নিয়েছি এবং উপরের স্ক্রোলগুলিকেও পাশাপাশি এড়াতে এটি সামঞ্জস্য করেছি।

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);
};

Question 7

মসৃণ স্ক্রোলটি অর্জন করতে আপনি বেসিক সিএসএস ব্যবহার করতে পারেন

html {
  scroll-behavior: smooth;
}

Question 8

নেড রকসন মূলত এই প্রশ্নের উত্তর দেন। তবে তার সমাধানের মধ্যে মারাত্মক ত্রুটি রয়েছে। লক্ষ্যবস্তু উপাদান যখন ভিউপোর্ট-উচ্চতার চেয়ে পৃষ্ঠার নীচের দিকে থাকে, তখন ফাংশনটি তার প্রস্থান বিবৃতিতে পৌঁছায় না এবং পৃষ্ঠার নীচে ব্যবহারকারীকে আটকে রাখে। এটি কেবল পুনরাবৃত্তি গণনা সীমাবদ্ধ করে সমাধান করা হয়।

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);
}