2

I have an anchor link inside accordion sub-menu. I have another anchor link outside this accordion that links to the inside anchor tag. When I click on outside anchor link I want the page to scroll down to accordion and also open the accordion menu where anchor was placed.

I have the following html inside body

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

When I click on Hello I want the page to scroll down to anchor tag with id move and after that I want to trigger a click on div with id two. I am new to javascript and jquery. I want to know if it is possible.

Thanks.

raju
  • 191
  • 1
  • 3
  • 12
  • 2
    it is possible. What have you done in order to achieve this?Please show us some code. – ZombieChowder Jan 06 '17 at 14:48
  • 1
    You don't need javacript for that. – Troyer Jan 06 '17 at 14:48
  • 1
    What you have by itself will work however your page is so short that you don't see it scroll down. – kawnah Jan 06 '17 at 14:48
  • What exactly are you trying to achieve with this? Also, you're missing a `=` in the last link. – Roope Jan 06 '17 at 14:49
  • It should work as is without javascript, just add `=` to your last div as @Roope said. You are linking correctly, you just need to make the page big enough to even have a scroll available... – Z-Bone Jan 06 '17 at 15:03

4 Answers4

3

Here is solution:

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

scrollToAnchor('move');

View reference here:

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>
Mihai Alexandru-Ionut
  • 47,092
  • 13
  • 101
  • 128
3

You can easy navigate with <a href=#id"></a>, much better than use JS on my opinion :)

For example:

<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>
Troyer
  • 6,765
  • 3
  • 34
  • 62
1

This is entirely possible. There's a slight complexity to triggering the click event, depending on what you want, but even that is not bad.

With jQuery and the jQuery scrollTo plugin (see here - you can load it via a content delivery network so you don't even need to host a local copy) both installed, you'll want something like this:

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

Line by line, what you are doing is: 1. Target the anchor tag with the href="#move", and attach a function to handle the click event.

  1. When that function is triggered, it triggers the scrollTo plugin. We give the scrollTo plugin the ID where we want to scroll to, and then an object {} which contains the settings we are passing to the scrollTo plugin.

  2. The only setting we necessarily need here is the onAfter callback, which executes a function when the animation finishes.

  3. During that callback, call the click event. See here for a discussion of the difference between .click() and .trigger("click"), but in short, if you want to just trigger the event handler you can use the .trigger() method, and I believe .click() works pretty much the same wayhere. So, if you don't want to just trigger a click handler, but actually navigate to a link, then you'd need to do it differently.

Community
  • 1
  • 1
Bemisawa
  • 248
  • 2
  • 9
0

That is what exactly possible with 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>
Codemole
  • 3,069
  • 5
  • 25
  • 41