我在手风琴子菜单中有一个锚点链接。我在这个手风琴之外有另一个锚链接，链接到内部锚标签。当我点击外部锚点链接时，我希望页面向下滚动到手风琴，并打开放置锚点的手风琴菜单。
我体内有以下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>
当我点击Hello时，我希望页面向下滚动到具有id move的锚标签，之后我想触发id为id的div的点击。我是javascript和jquery的新手。我想知道是否有可能。
感谢。
答案 0 :(得分：3)
这是解决方案：
function scrollToAnchor(aid){
var aTag = $("a[id='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('move');
查看此处的参考资料：
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>
答案 1 :(得分：3)
您可以使用<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>
答案 2 :(得分：1)
这完全有可能。根据您的需要，触发点击事件会有轻微的复杂性，但即使这样也不错。
使用jQuery和jQuery scrollTo plugin（请参阅此处 - 您可以通过内容分发网络加载它，这样您甚至不需要托管本地副本）都安装了，您会想要一些东西像这样：
$('a[href="#move"]').click(function() {
$(window).scrollTo('#move', {
onAfter: function() {
$('#two').click();
}
})
});
逐行，您正在做的是： 1.使用href =＆＃34;＃move＆＃34;来定位锚标记，并附加一个函数来处理点击事件。
触发该功能时，会触发scrollTo插件。我们为scrollTo插件提供我们要滚动到的ID，然后是一个对象{}，其中包含我们传递给scrollTo插件的设置。
我们在这里唯一需要的设置是onAfter回调，它在动画结束时执行一个函数。
在该回调期间，请调用click事件。有关.click（）和.trigger（＆＃34; click＆＃34;）之间区别的讨论，请参阅here，但简而言之，如果您只想触发事件处理程序，则可以使用.trigger （）方法，我相信.click（）的工作方式几乎相同。因此，如果您不想触发点击处理程序，但实际导航到某个链接，那么您需要采用不同的方式。
答案 3 :(得分：0)
这就是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>