-1

Buenos días,

para que tengan más clara mi pregunta, les dejo dos links al comportamiento que yo quiero llegar.

En una misma pagina si navegan por el menú que está arriba, les dirige a la misma página pero ya sea más arriba o más abajo dependiendo de su ubicación, a lo que me voy es que no vuelve a cargar la pagina, que todo está en esa misma página. Y otro comportamento, en la barra de dirección, la página no se carga con la extensión del archivo.

Quisiera saber cómo poder hacer eso , estoy usando bootstrap4

Muchisimas gracias de antemano.

Sitio de ejemplo 1: http://azmind.com/demo/maren/v1-0/#

Sitio de ejemplo 2: http://mostafiz.me/demo/himu/#

1
  • 1
    Hola, ¿Podrías añadir más información a la Pregunta? "Qué has intentado", como, código de ejemplo. De esta manera se te podrá brindar una mejor respuesta. Como verás Stack Overflow en español no es un sustituto de Google; la investigación y los intentos van por tu cuenta.
    – JuankGlezz
    el 19 abr. 2017 a las 14:39

2 respuestas 2

3
  1. Debes agregar data-spy="scroll" en el elemento que va ser usado como el area desplazable, generalmente es el elemento <body>.
  2. Luego agrega el atributo data-target con el valor del ID o del nombre de la clase de la barra de navegacion .navbar esto es para asegurar que la barra de navegacion esta conectada con el area desplazable. Ejemplo: data-target=".navbar"
  3. EL ID de los elementos desplazables deben conicidir con los Links dentro de la lista de elementos dentro de la barra de navegacion <div id="section1"> debe coincidir con <a href="#section1>
  4. Agregar al elemento con data-spy="scroll" la propiedad CSS de posicion con el valor de "relative" para que trabaje de forma correcta.

Puedes encontrar un ejemplo completo en el siguiente link: Como crear un Scrollspy

2
  • Muchas gracias. Con respecto a este tema, sabiendo que una pagina html solo deberá haber un único MAIN, no se podría con esta estructura, verdad? Si mis secciones son NOSOTROS, CLIENTES, PORTAFOLIO, CONTACTANO, ETC.... si lo tuviera separado en archivos .html diferentes, podria hacer uso de estas etiquetas semanticas... que me dice ud al respecto? Gracias.
    – lmendivil
    el 19 abr. 2017 a las 16:00
  • podrias hacerlo, trayendo el contenido del resto de las extructuras via ajax el 19 abr. 2017 a las 18:54
0

Este es tu JS,

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top
    });
});

Y este tu HTML

<nav>
    <a href="#welcome">Welcome</a>
    <a href="#about">About</a>
    <a href="#section3">Section 3</a>
</nav>

<div id="welcome">Welcome to this website</div>
<div id="about">About this website, and such</div>
<div id="section3">The third section</div>

El punto es que tus tags <a> tengan como liga el id de la sección a la que quieres navegar, de tal forma que con el evento de click que se define en la parte de JS, anime la página haciendo scroll hasta llegar a la opción que desees.

2
  • Muchisimas gracias. De modo que esto no seria productivo cuando la informacion sea extensa, verdad? Es decir, TENERLO TODO es un mismo archivo (.html) hasta incluso, podria ser poco administrable, verdad?
    – lmendivil
    el 19 abr. 2017 a las 15:24
  • Es cuestión de estética y de lo que quiera tu cliente, pero si, generalmente estas animaciones se dejan para páginas cuyas secciones son del tamaño del navegador para que al usuario sea más fácil visualizar el contenido de cada sección a la que es llevado a través del scroll.
    – Yikarus
    el 19 abr. 2017 a las 15:26

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.