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

仅按Javascript顺畅滚动按钮按下

2 个答案: