アンカーリンクをクリックした後にクリックイベントをトリガーします

Question

私はアコーディオンサブメニュー内にアンカーリンクを持っています。私は内側のアンカータグにリンクするこのアコーディオンの外側に別のアンカーリンクを持っています。外側のアンカーリンクをクリックすると、ページがアコーディオンにスクロールし、アンカーが配置されたアコーディオンメニューが開きます。私は上をクリックすると

は私が

<a href="#move"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <a id="move"></a> 
 
</div>

こんにちは、私は私がトリガーしたいIDを移動して、その後、タグを固定するために、下にスクロールするページを体内次のHTMLを望んでいますIDが2のdivをクリックします。私はjavascriptとjqueryを初めて使っています。私はそれが可能かどうかを知りたい。

ありがとうございました。ここで

Answer 1

これは完全に可能です。クリックイベントをトリガするのは少しだけ複雑ですが、それは悪いことではありません。 jQueryとjQuery scrollTo pluginで

（ここを参照してください - あなたも、ローカルコピーをホストする必要はありませんので、あなたは、コンテンツ配信ネットワークを経由してそれを読み込むことができます）インストールの両方、あなたはこのような何かをしたいでしょう：

$('a[href="#move"]').click(function() { 
    $(window).scrollTo('#move', { 
    onAfter: function() { 
     $('#two').click(); 
    } 
    }) 
}); 

行ごとに、何をしているのですか： 1. href = "＃move"でアンカータグを指定し、clickイベントを処理する関数を追加します。

2. この関数がトリガされると、scrollToプラグインがトリガされます。 scrollToプラグインに、スクロール先のIDと、scrollToプラグインに渡す設定を含むオブジェクト{}を与えます。

3. アニメーションが終了したときに関数を実行するonAfterコールバックがここで必要なのは唯一の設定です。

4. そのコールバック中に、clickイベントを呼び出します。つまり、.click（）と.trigger（ "click"）の違いについては、hereを参照してください。しかし、単純にイベントハンドラをトリガしたい場合は、.trigger（）メソッドを使用できます。 （）はほぼ同じ方法で動作します。したがって、単にクリックハンドラをトリガするのではなく、実際にリンクに移動したい場合は、別の方法で行う必要があります。

Answer 2

ソリューションです：

function scrollToAnchor(aid){ 
    var aTag = $("a[id='"+ aid +"']"); 
    $('html,body').animate({scrollTop: aTag.offset().top},'slow'); 
} 

scrollToAnchor('move'); 

ここに表示参照：

• http://api.jquery.com/offset/
• http://api.jquery.com/animate/

function scrollToAnchor(aid){ 
 
    var aTag = $("a[id='"+ aid +"']"); 
 
    $('html,body').animate({scrollTop: aTag.offset().top},500); 
 
} 
 
$('#click').click(function(){ 
 
    scrollToAnchor('move'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="click"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <a id="move">move</a> 
 
</div>

Answer 3

あなたは簡単に私の意見:)例えば

でJSを使うよりも、はるかに優れた、<a href=#id"></a>で移動することができます：jQueryを使って正確に何が可能である

<h1 id="up"> Up </h1> 
 
<a href="#one"><p>one</p></a> 
 
<a href="#two"><p>two</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    <h1>One</h1> 
 
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo). 
 
    </div> 
 

 
    <div id="two"> 
 
    <h1>two</h1> 
 
    Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).  </div> 
 

 
    <a href="#up"><h1>GO UP</h1></a> 
 
</div>

Answer 4

。

$('a').on('click', function(e){ 
 
    e.preventDefault(); 
 
    
 
    var target = $(this).attr('href'); 
 
    if ($(target).length > 0) { 
 
    
 
    $('body').animate({ 
 
     scrollTop: $(target).offset().top 
 
    }, 1000, function(){ 
 
     $(target).trigger('click'); 
 
    }); 
 
    
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#move"><p>Hello</p></a> 
 

 
<div> 
 
    <div id="one"> 
 
    One 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 

 
    <div id="two"> 
 
    Two 
 
    </div> 
 
    <div> 
 
    some text 
 
    <div> 
 
    <a id="move" onclick="alert('A')"></a> 
 
</div>