Question

我使用div和onclick =函数。这反过来会出现一个确认框。如果用户按OK。它使用：window.location.hash重定向并自动滚动到div id。自动滚动工作正常。但动画滚动在这一点上打破了。

使用传统的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;
});

简而言之：动画滚动与传统的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);
}

不使用标准<a href=""> links</a>时的动画滚动

1 个答案: