17

Para evitar que se cargue el id del menu de navegación en la url cambie los atributos de: href="#" por los atributos de: data-ref="#" funciona eso pensé, porque no se agrega el id del según el menú al presionar... Pero al llegar al reposo de la animación automáticamente me agrega el id del menu en la url.

Código:

$(function() {
  $("[data-ref^='#']").bind('click', function(e) {
  //$('a[href*=#]').bind('click', function(e) {
    e.preventDefault();
    var target = $(this).attr("data-ref");
    $('html, body').stop().animate({
      scrollTop: $(target).offset().top
    }, 600, function() {
      location.hash = target;
    });
    return false;
  });
});
$(window).scroll(function() {
  var scrollDistance = $(window).scrollTop();

  // Show/hide menu on scroll
  //if (scrollDistance >= 850) {
  //		$('nav').fadeIn("fast");
  //} else {
  //		$('nav').fadeOut("fast");
  //}

  // Assign active class to nav links while scolling
  $('.page-section').each(function(i) {
    if ($(this).position().top <= scrollDistance) {
      $('.navigation a.active').removeClass('active');
      $('.navigation a').eq(i).addClass('active');
    }
  });
}).scroll();
* {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  transition: all .1s ease;
}
html, body {
  height: 100%;
}
h1 {
  font-size: 64px;
}
.page-section {
  height: 480px;
  width: 50%;
  margin-left: 35%;
  margin-top: 5%;
  padding: 3em;
  background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
  color: white;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}
.navigation {
  position: fixed;
  width: 30%;
  margin-left: 2%;
  background-color: #999;
  color: #fff;
}
.navigation__link {
  display: block;
  color: #ddd;
  text-decoration: none;
  padding: 1em;
  font-weight: 400;
}
.navigation__link:hover {
  background-color: #aaa;
}
.navigation__link.active {
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>

<nav class="navigation" id="mainNav">
  <a class="navigation__link" data-ref="#aaa">Section 1</a>
  <a class="navigation__link" data-ref="#bbb">Section 2</a>
  <a class="navigation__link" data-ref="#ccc">Section 3</a>
  <a class="navigation__link" data-ref="#ddd">Section 4</a>
  <a class="navigation__link" data-ref="#eee">Section 5</a>
  <a class="navigation__link" data-ref="#fff">Section 6</a>
</nav>

<div class="page-section hero" id="1">
  <h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="aaa">
  <h1>Section Two</h1>
</div>
<div class="page-section" id="bbb">
  <h1>Section Three</h1>
</div>
<div class="page-section" id="ccc">
  <h1>Section Four</h1>
</div>
<div class="page-section" id="ddd">
  <h1>Section Five</h1>
</div>
<div class="page-section" id="eee">
  <h1>Section Six</h1>
</div>
<div class="page-section" id="fff">
  <h1>Section Seven</h1>
</div>

¿Cómo puedo evitar que se agregue el id del menu de navegación en la url al reposar la animación?

2 respuestas 2

17
+100

Tengo una solución al problema que estas solicitando:

Lo que quieres es que no te aparezca el #... en la url cuando se hace click a los botones para el campo URL:

introducir la descripción de la imagen aquí

En el código solo tienes que comentar la linea:

location.hash = target;

Quedando la rutina de esta forma:

$(function() {
    $("[data-ref^='#']").bind('click', function(e) {
    //$('a[href*=#]').bind('click', function(e) {
        e.preventDefault();
        var target = $(this).attr("data-ref");
        $('html, body').stop().animate({
            scrollTop: $(target).offset().top
        }, 600, function() {
            // location.hash = target;
        });
        return false;
    });
});

Explicacion:

El location.hash sirve para poner o asignar el URL de ancla, mas información sobre este comando en este link:

https://www.w3schools.com/jsref/prop_loc_hash.asp

Al final el código al ejecutarlo no te colocara el #... en la URL quedando como lo requieres:

introducir la descripción de la imagen aquí

Otra cosa que puedes agregar para mejorar el código es una regla CSS como esta: cursor: context-menu; para que el puntero del mouse sea una flecha al apuntar sobre los link, quedaría muy bien en el código:

.navigation__link {
  display: block;
  color: #ddd;
  text-decoration: none;
  padding: 1em;
  font-weight: 400;
  /*  puntero cursos */
  cursor: context-menu;
}

Espero que pueda ayudarte..

3
  • 3
    Aquí esta la solución, denle a este hombre la recompensa... el 9 sep. 2019 a las 17:23
  • gracias por el apoyo! el 9 sep. 2019 a las 19:28
  • @AlexanderRodriguez Gracias funciona tal como lo deseaba :)
    – Lou
    el 15 sep. 2019 a las 0:12
-2

comenta la línea

location.hash = target;
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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