Show and scroll to
with click on specific link

Question

I have many and many links to the different divs on the same page. The div is hidden and by clicking on a link it scrolls to that div and shows up.

Sample HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="first_div">
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
</div>

<p><a href="#first_div">see content with huge text</a></p>

For example: I am at the bottom of the page and click on one of those links, the page scrolls to that and displays it (hidden before). Different links should lead to different divs of course.

your code is working as you expected . add more content it will work — JYoThI, Mar 13 '17 at 08:52
Seems a duplicate for [this](http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link) — DanieleAlessandra, Mar 13 '17 at 09:13

Bourbia Brahim · Accepted Answer · 2017-03-13T09:46:42.267

First add Class to all paragraph that you want to hide and set display:none css property .

After set event click on links then get it's href (refers to parag to be shown) , then show and scroll to this paragraph .

See bellow snippet may help you to understand just how it work :

$(document).ready(function(){
   $("a").click(function() {
      if(this.href.split("#")[1]) {
       
        var id= "#"+this.href.split("#")[1];
        
        $(id).fadeIn(2000);
        $('html, body').animate({
            scrollTop: $(id).offset().top
        } , 1000);
        
      }
    });
})

.hidden {
  display:none;
  color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p><a href="#first_div">see content with huge text</a></p>

<br><br><br><br><br><br><br><br><br><br>
Texts
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Div after will shown up <br><br>
<div class="hidden" id="first_div">
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
My content with huge text
</div>

exactly that scipt!) Thank you very much!) – Orkhan Bagirov Mar 13 '17 at 10:38 — Orkhan Bagirov, Mar 13 '17 at 10:38

Show and scroll to with click on specific link

1 Answers1

Show and scroll to
with click on specific link