Javascript-только плавная прокрутка на кнопке

Question

На этом сайте должно быть полноразмерное изображение. Дальнейший контент расположен ниже складки, а в нижней части изображения находится элемент «прокрутки», чтобы побудить пользователей обнаруживать остальную часть содержимого. По клику мне удалось сделать прокрутку сайта на 300 пикселей. Однако я хочу сделать это плавно. Вот мой текущий код:

window.onload = function() { 
    var scroll = document.getElementById("scroll"); 
    scroll.onclick = function() { 
     var top = self.pageYOffset; 
     var goal = 300; 
     for(var i=0, l=goal; i<l; ++i) { 
     window.scrollBy(0,1); 
     }  
    }; 
}; 

Это работает для прокрутки, но не плавно. Я думал, что если бы у меня был цикл for, изменение значения window.scrollBy на что-то вроде .001 заставит его прокручивать более медленно (таким образом, плавно), но эта функция, похоже, не принимает десятичных точек.

Любые советы? Технически это нормально, но я бы предпочел добавить этот последний бит. Благодаря!

Answer 1

Ваш код работает очень быстро, и вы не видите гладкий эффект. Вы должны использовать функцию setInterval() и прокручивать до 300/n px на каждой итерации (n - количество итераций). Как это:

window.onload = function() { 
    var scroll = document.getElementById("scroll"); 
    scroll.onclick = function() { 
     var currentScroll = 0; 
     var goal = 300; 
     var step = goal/10 
     var timer = setInterval(function() { 
      if (currentScroll < goal) { 
       window.scrollBy(0, step); 
       currentScroll += step; 
      } else { 
       clearInterval(timer); 
      } 
     }, 50); 
    }; 
};  

Answer 2

попробовать что-то вроде этого ... example

$(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 
      }, 1000); 
      return false; 
      } 
     } 
     }); 
    });