2

我想使用 jQuery 通过文本框转到锚点，例如，我想使用这种形式：

<form id="gotoanchorform">
    <input id="gotoanchorinput" type="text" />
    <input type="submit" value="Go to anchor" />
</form>

在这种形式中，我将输入锚点的名称，当我单击“转到锚点”按钮或按 Enter 键时，我希望页面向下滚动到该锚点：

<a name="targetAnchor" id="targetAnchor">Target</a>

如何让它与 jQuery 一起工作？

4

4 回答 4

1 
    var anchor = $("#gotoanchorinput").val();
    var position = $("#"+anchor).offset();
    window.scrollTo(position.left, position.top);

这段代码让你的页面滚动到用#gotoanchorinput.

于 2012-09-03T15:20:48.787 回答
0

只需这样做：

var url = $('#gotoanchorinput').val();    
$(location).attr('href',url);
于 2012-09-03T15:18:28.087 回答
0

尝试这样的事情：

$(function() {
    $('form#gotoanchorform').submit(function(e) {
        e.preventDefault();

        var desired = $('#gotoanchorinput').val();

        window.location.href = window.location.href + '#' + desired;

        // or

        $('html, body').animate({'scrollTop', $('a[name*="' + desired +'"').offset().top + 'px'}, 900);


        return false;
    });
});

因此，如果您键入“foo”并单击提交，页面将滚动到哪个名称属性包含“foo”

于 2012-09-03T15:18:56.047 回答
0

HTML部分：

<form id="myForm" data-anchor="#myAnchor">
    <input type="text" />
    <input type="submit" value="Go to anchor" />
</form>

注意：data-x 属性是有效的 HTML。

JS部分：

$(document).ready(function() {

    $('#myForm').submit(function(e){

        $(location).attr('href', $(this).attr('data-anchor'));

        return false;
    });
});
于 2012-09-03T15:21:44.230 回答