如何使用文本输入走锚？(How to use text-input to go to anchor?

我想使用jQuery去与使用文本框的锚，例如，我想用这种形式：

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

在这种形式我输入锚点的名称，当我点击“转到锚”按钮或按回车键我想要的页面向下滚动到锚：

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

将如何得到这个使用jQuery工作？

Answer 1:

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

这段代码让你的页面滚动写在锚#gotoanchorinput 。

Answer 2:

尝试是这样的：

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

所以，如果你键入“富”，然后点击提交，页面将滚动到其名称属性包含“富”

Answer 3:

HTML部分：

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

注：数据-X属性是有效的HTML。

JS部分：

$(document).ready(function() {

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

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

        return false;
    });
});

Answer 4:

简单地做：

var url = $('#gotoanchorinput').val();    
$(location).attr('href',url);

文章来源: How to use text-input to go to anchor?