Плавная прокрутка до определенного div по щелчку

Question

Плавная прокрутка до определенного div по щелчку

то, что я пытаюсь сделать, это сделать так, что если вы нажмете на кнопку, она прокручивается вниз (плавно) на определенный div на странице.

Я начал JSFiddle здесь: http://jsfiddle.net/ryXFt/2/

что мне нужно, так это если вы нажмете на кнопку, она плавно прокручивается до div 'second'.

HTML:

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

<div class="second">Hi</div>

CSS:

.first {

  width: 100%;

  height: 1000px;

  background: #ccc;

}



.second {

  width: 100%;

  height: 1000px;

  background: #999;

}

пожалуйста, помогите.

410 4

jQuery javascript

4 ответов:

Comments

Ничего не найдено.

Sudhir Bastakoti · Accepted Answer · 2013-08-06 06:11:08

do:

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

Обновлено Jsfiddle

nico · Accepted Answer · 2013-08-06 07:30:12

есть много примеров плавной прокрутки с использованием JS-библиотек, таких как jQuery, Mootools, Prototype и т. д.

следующий пример находится на чистом JavaScript. Если у вас нет jQuery/Mootools/Prototype на странице или вы не хотите перегружать страницу тяжелыми библиотеками 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>
CSS часть:
.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}
JS часть:
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);
}

Ned Rockson · Accepted Answer · 2015-12-24 21:09:03

Я немного поиграл с ответом Нико, и он чувствовал себя нервным. Провел небольшое расследование и нашел 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);
}

Marek Lisý · Accepted Answer · 2018-09-15 14:21:13

взял Нэд Роксон'S версия и отрегулировал его, чтобы позволить вверх прокрутки, а также.

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