0
4

6 回答 6

0

你想要这样的东西。

HTML：

<form id="search-form" href="#test1" class="smoothscroll">
    <input type="text" id="searchText"/>
    <input type="button" value="Search" id="searchButton"/>
</form>

<a style="margin-top: 1000px; display: inline-block;" href="test1.html" style="text-decoration: none">
    <img src="pic1.png" id="image1" />
    <img src="pic2.png" id="image2"/>
</a>

JS：

$(document).ready(function () {
    $( "#searchButton" ).click(function() {

    var text = $('#searchText').val().toLowerCase();

    $( "html, body" ).animate({     
        scrollTop: ($('#'+text).offset().top)
    }, 2000);
    });
});

这是JsFiddle。我在<a>链接中添加了很大的边距以查看滚动效果。

于 2013-10-29T14:23:03.623 回答
0

您的 HTML中没有$('#test1')。jQuery 选择器#test1查找带有id“test1”的元素。尝试将其添加id到您的a：

<a id="test1" href="test1.html" style="text-decoration: none">

另外，我认为这不是标签href="#test1"的有效属性。form它没有被用于任何事情，所以你可能不需要它。（表单的class属性也可能是多余的，从技术上讲可能是无效的。您需要验证您的标记以确保这些事情。）

于 2013-10-29T14:20:01.397 回答
0

请在您的任何图像中添加“id=1”。

于 2013-10-29T14:21:21.257 回答
0

您应该向该锚点添加一个 ID，否则您可以在技术上执行以下操作：

$('a[href="test1.html"]')

我仍然建议给它一个id="test1'

于 2013-10-29T14:21:29.207 回答
0

添加id="test1"到您需要的图像。或使用$("a[href*='test1']:first").offset().top

于 2013-10-29T14:21:40.957 回答
0

在调用 animate() 之前测试 $("#test1").length 是否 > 0。不过，这可能只是解决症状，而不是根本问题。

于 2013-10-29T14:21:45.690 回答