点击锚链接后触发点击事件

Question

我在手风琴子菜单中有一个锚链接。我在这个手风琴外面有另一个锚链接，它链接到内部锚标签。当我单击外部锚链接时，我希望页面向下滚动到手风琴并打开放置锚的手风琴菜单。

我在正文中有以下 html

<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 move 的锚标记，然后我想触发点击 id 为 2 的 div。我是 javascript 和 jquery 的新手。我想知道这是否可能。

谢谢。

Answer 1

您可以使用<a href=#id"></a> 轻松导航，在我看来比使用 JS 更好:)

例如：

<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 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

这是完全可能的。触发点击事件有点复杂，这取决于你想要什么，但即使这样也不错。

同时安装了 jQuery 和 jQuery scrollTo plugin（请参阅此处 - 您可以通过内容交付网络加载它，因此您甚至不需要托管本地副本），您会想要这样的东西：

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

逐行，你正在做的是： 1.以href="#move"定位锚标签，并附加一个函数来处理点击事件。

1. 当该函数被触发时，它会触发 scrollTo 插件。我们为 scrollTo 插件提供我们想要滚动到的 ID，然后是一个对象 {}，其中包含我们传递给 scrollTo 插件的设置。

2. 这里我们唯一需要的设置就是onAfter回调，它会在动画结束时执行一个函数。

3. 在回调期间，调用 click 事件。有关 .click() 和 .trigger("click") 之间区别的讨论，请参阅 here，但简而言之，如果您只想触发事件处理程序，您可以使用 .trigger() 方法，我相信.click() 在这里的工作方式几乎相同。因此，如果您不想仅仅触发点击处理程序，而是实际导航到链接，那么您需要以不同的方式进行操作。

Answer 4

这正是 jQuery 所能做到的。

$('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>