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