javascript - 将按钮 javascript 应用于 a href

Question

我的 friend 给了我这段代码，一旦用户按下 anchor 按钮，页面就会出现平滑滚动效果:

<form id = "button_design" action="#page2">
     <input type="submit" class="anchor-button" value="Page 2" />
</form>

还有 JavaScript:

$(function() {
$('input.anchor-button').click(function(e) {
e.preventDefault();
var hash = $(this).parent('form').attr('action');
var target = $(hash);
target = target.length ? target : $('[name=' + hash.slice(1) +']');
if (target.length) {
  $('html, body').animate({
   scrollTop: target.offset().top
 }, 1000);
}

});
});

它适用于 input type = "submit"只是，我想尝试将此代码用于我的 <a href ="#page3"...这只是一个链接，而不是一个按钮。谁能帮我转换代码以使其适用于 a href也？我试着摆弄它，但一无所获。

Answer 1

如果将标签更改为 a (在 jQuery 和 HTML 中)，代码功能基本相同。示例:

$(function() {
$('a.anchor-button').click(function(e) {
e.preventDefault();
var hash = $(this).parent('form').attr('action');
var target = $(hash);
target = target.length ? target : $('[name=' + hash.slice(1) +']');
if (target.length) {
  $('html, body').animate({
   scrollTop: target.offset().top
 }, 1000);
}

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "button_design" action="#page2">
     <a class="anchor-button" href="javascript:void(0)"> Page 2 </a>
</form>

<div style="height:800px; background-color:blue;">&nbsp;</div>
<div name="page2">test</div>