Tengo muchos y muchos enlaces a los diferentes divs en la misma página. El div está oculto y, al hacer clic en un enlace, se desplaza a ese div y aparece.
HTML de muestra:
<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>Por ejemplo: estoy en la parte inferior de la página y hago clic en uno de esos enlaces, la página se desplaza hasta allí y lo muestra (oculto antes). Por supuesto, diferentes enlaces deberían conducir a diferentes divs.
Primero agregue Class a todos los párrafos que desee ocultar y establezca display:none css property .
Después de configurar el evento, haga clic en los enlaces, luego obtenga su href (se refiere al párrafo que se mostrará), luego muestre y desplácese hasta este párrafo.
Ver el siguiente fragmento puede ayudarlo a comprender cómo funciona:
$(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>