У меня есть якорная ссылка в подменю аккордеона. У меня есть другая якорная ссылка вне этого аккордеона, которая ссылается на внутренний якорный тег. Когда я нажимаю на внешнюю ссылку якоря, я хочу, чтобы страница прокручивалась вниз до аккордеона, а также открывала меню аккордеона, где был размещен якорь.

У меня есть следующий 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>

Когда я нажимаю Привет, я хочу, чтобы страница прокручивалась вниз до якорного тега с идентификатором перемещения, и после этого я хочу вызвать клик по div с идентификатором два. Я новичок в JavaScript и JQuery. Я хочу знать, возможно ли это.

Спасибо.

2
raju 6 Янв 2017 в 17:46

4 ответа

Лучший ответ

Это вполне возможно. В зависимости от того, что вы хотите, вызывать событие нажатия немного сложно, но даже это неплохо.

С помощью jQuery и плагина jQuery scrollTo (см. Здесь - вы можете загрузить его через сеть доставки контента) так что вам даже не нужно размещать локальную копию) оба установлены, вам нужно что-то вроде этого:

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

Строка за строкой, что вы делаете: 1. Установите метку привязки с помощью href = "# move" и прикрепите функцию для обработки события click.

  1. Когда эта функция запускается, она запускает плагин scrollTo. Мы даем плагину scrollTo идентификатор, к которому мы хотим перейти, а затем объект {}, который содержит параметры, которые мы передаем плагину scrollTo.

  2. Единственный параметр, который нам здесь нужен, - это обратный вызов onAfter, который выполняет функцию после завершения анимации.

  3. Во время этого обратного вызова вызовите событие click. См. здесь для обсуждения различия между .click () и .trigger (" click "), но вкратце, если вы хотите просто запустить обработчик событий, вы можете использовать метод .trigger (), и я считаю, что .click () работает практически так же, как и здесь. Итак, если вы не хотите просто запускать обработчик кликов, а просто переходить по ссылке, то вам нужно сделать это по-другому.

1
Community 23 Май 2017 в 12:34

Вот решение:

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>
3
Mihai Alexandru-Ionut 6 Янв 2017 в 15:07

Именно это и возможно с помощью 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>
0
Codemole 6 Янв 2017 в 14:59

Вы можете легко перемещаться с <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>
3
Troyer 6 Янв 2017 в 14:52