Question

我的朋友给了我这段代码，一旦用户按下一个锚按钮，就会允许平滑滚动效果到页面：

<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中），则代码功能基本相同。例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你真的必须学习使用JS的选择器。这是一个链接的例子。每个链接都必须包含anchor个类，并在其href属性中定位。所以你不需要一个表格来包装它：

<a class="anchor" href="#page2"> Page 2 </a>

此标记的脚本

$(function () {
    $('a.anchor').click(function (e) {
        e.preventDefault();
        var hash = $(this).attr('href');
        var target = $(hash);
        target = target.length ? target : $('[name=' + hash.slice(1) + ']');

        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    });
});

将按钮javascript应用于href

2 个答案: