不使用标准 <a href> 链接时的动画滚动

Question

我正在使用带有 onclick= 功能的 div。 这又会执行一个确认框。 如果用户按确定。它使用重定向：window.location.hash 并自动滚动到 div id。 自动滚动工作正常。但动画滚动此时会中断。

使用传统的 a href 对动画滚动效果很好。

我是一个业余爱好者，我拼凑了来自不同来源的以下代码。我会发布代码，希望有人能给出答案。

代码：

function FrontAsNew() {

 if (confirm("No damage allowed") == true) { window.location.hash = "#side"; }
 else { window.location.hash = "#front"; } 

}

<div id="cosmetics_box" style="cursor:hand; cursor:pointer;" onclick="FrontAsNew()">As new</div>

Animated scroll script: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script>
$('div').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
}, 2000);
return false;
});

简而言之：动画滚动适用于传统的 a href 链接。但是，当使用 div 作为链接来执行使用 location.hash 的函数时，动画滚动中断。

提前感谢您的帮助！

Answer 1

试试这样的：

function FrontAsNew() {

 if (confirm("No damage allowed") == true) { 
   scrollToTopById('side');
 }
 else { 
   scrollToTopById('front');
 } 

}

function scrollToTopById(id) {
   $('html, body').animate({scrollTop: $('#' + id).offset().top}, 2000);
}