jquery - テキスト入力を使用してアンカーに移動するには?

Question

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 で動作させるにはどうすればよいでしょうか?

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

したがって、「foo」と入力して送信をクリックすると、「foo」を含む name 属性までページがスクロールされます。

Answer 3

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

Answer 4

単に行う：

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