如何设置滚动到顶部JavaScript的动画

我有两个网站具有相同的功能。它在其中一个网站上有效，在另一个网站上无效

script.js

：

function scrollToTop(){
var timerHandle = setInterval(function() {
  if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0)
  window.scrollBy(0,-50); else clearInterval(timerHandle); },10);
}

HTML

       <ul class="footer-navigation">
        <li><a class="back" id="backtoTop" onclick="scrollToTop();return false;"href="#">&uarr;Back to Top</a></li>
        <li><a class="home" href="#home">Home</a></li>
        <li><a class="about" href="#about">About</a></li>
        <li><a class="contact" href="#contact">Contact</a></li>
      </ul>

它没有碰到任何错误，但似乎是在“计数”。当I

console.log

时，控制台中记录的

计数旁边有一个数字，但该函数从不执行

谢谢
我想说的是，您不应该通过
设置间隔
滚动，而应该通过
请求动画帧
滚动，以避免滚动中出现刺耳的声音。解决问题的一个简单方法是使用CSS使滚动平滑。但是，这会影响所有滚动


函数scrollToTop（）{
滚动到（0，0）；
}
html{
滚动行为：平滑；
}

向下滚动





我想说的是，您不应该通过
设置间隔来滚动，而应该通过
请求动画帧来滚动，以避免滚动中出现刺耳的声音。解决问题的一个简单方法是使用CSS使滚动平滑。但是，这会影响所有滚动


函数scrollToTop（）{
滚动到（0，0）；
}
html{
滚动行为：平滑；
}

向下滚动





试试这个：


函数scrollToTop（）{
scrollTo（{top:0，行为：'smooth'}）；
}

向下滚动





试试这个：


函数scrollToTop（）{
scrollTo（{top:0，行为：'smooth'}）；
}

向下滚动





（函数（$）{
“使用strcit”；
$.ScrollUptop=函数（选项）{
//默认选项
options=$.extend（{}，options）；
//变数
var$btnScroll=$（“^”）.hide（）；
var$body=$（document.body）；
//插入向上滚动至顶部按钮
$（$body）.append（$btnScroll）；
//附加点击事件按钮
$（$btnScroll）。单击（函数（e）{
e、 预防默认值（）；
$（$body）。设置动画(
{scrollTop:0}，
800
);
});
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
$（$btnScroll.fadeIn（）；
}否则{
$（$btnScroll.fadeOut（）；
}
});
};
$.ScrollUptop（）；
})（jQuery）；

请点击这个链接


您还可以使用源代码获取引用

查看来源：
（函数（$）{
“使用strcit”；
$.ScrollUptop=函数（选项）{
//默认选项
options=$.extend（{}，options）；
//变数
var$btnScroll=$（“^”）.hide（）；
var$body=$（document.body）；
//插入向上滚动至顶部按钮
$（$body）.append（$btnScroll）；
//附加点击事件按钮
$（$btnScroll）。单击（函数（e）{
e、 预防默认值（）；
$（$body）。设置动画(
{scrollTop:0}，
800
);
});
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
$（$btnScroll.fadeIn（）；
}否则{
$（$btnScroll.fadeOut（）；
}
});
};
$.ScrollUptop（）；
})（jQuery）；

请点击这个链接


您还可以使用源代码获取引用

查看来源：
看起来您的脚本工作正常。是的，似乎工作正常。到底是什么问题？它基本上不会滚动到顶部。当查看页面底部时，当点击scroll to top时，可以在左下角看到一条消息，内容如下：file:///C:/users/documents/website/index.html#. 我的网站目前已在本地保存。看起来你的脚本工作正常。是的，似乎工作正常。到底是什么问题？它基本上不会滚动到顶部。当查看页面底部时，当点击scroll to top时，可以在左下角看到一条消息，内容如下：file:///C:/users/documents/website/index.html#. 我的网站目前已在本地保存。谢谢！可以看得见，但对我的不起作用。我开始怀疑这是否与我的htmlhtml有关，正文{width:100%；height:100%；margin:0px；padding:0px；overflow-x:hidden；font-family:'ralway'，sans serif；}以上是我仅有的一件事，那就是解决方案-删除了溢出，并且成功了！谢谢你，里卡德！只是现在有一个问题是，在手机版上得到了一个空白页边距，溢出-x-隐藏正在解决！可以看得见，但对我的不起作用。我开始怀疑这是否与我的htmlhtml有关，正文{width:100%；height:100%；margin:0px；padding:0px；overflow-x:hidden；font-family:'ralway'，sans serif；}以上是我仅有的一件事，那就是解决方案-删除了溢出，并且成功了！谢谢你，里卡德！现在有一个问题是，在移动版上有一个空白页，overflow-x-hidden解决了这个问题，现在不需要jQuery了。Javascript的DOM操作已经迎头赶上。现在不需要JQuery了。Javascript的DOM操作已经迎头赶上。
(function($){
    'use strcit';

    $.ScrollUpToTop = function(options){

        // Default options
        options = $.extend({}, options);

        // Variables
        var $btnScroll = $("<button id=\"ScrollUpToTop\">^</button>").hide();
        var $body = $(document.body);

        // insert scroll up to top button
        $($body).append($btnScroll);

        // attach click event on button
        $($btnScroll).click(function(e){
            e.preventDefault();
            $($body).animate(
                {scrollTop:0},
                800
            );
        });

        $(window).scroll(function(){
            if( $(window).scrollTop() > 0) {
                $($btnScroll).fadeIn();
            } else {
                $($btnScroll).fadeOut();
            }
        });

    };

    $.ScrollUpToTop();

})(jQuery);