0

tengo en mi navbar un anchor tag que dice translate y deberia ir a englis.html pero no funciona y no se si tal vez los estilos esten tapando este anchor tag...

const navbarToggler = document.querySelector(".toggle__button");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");

navbarToggler.addEventListener("click", navbarTogglerClick);

function navbarTogglerClick() {
  navbarToggler.classList.toggle("open-navbar-toggler");
  navbarMenu.classList.toggle("open");
}

for (let i = 0; i < navbarLinks.length; i++) {
  navbarLinks[i].addEventListener("click", navbarLinkClick);
}

function navbarLinkClick(event) {
  smoothScroll(event); // Call the "smoothScroll" function

  if (navbarMenu.classList.contains("open")) {
    // Close navbarMenu in smaller screens
    navbarToggler.click();
  }
}

function smoothScroll(event) {
  event.preventDefault();
  const targetId =
    event.currentTarget.getAttribute("href") === "#"
      ? "header"
      : event.currentTarget.getAttribute("href");
  const targetPosition = document.querySelector(targetId).offsetTop;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  const duration = 1000;
  let start = null;

  window.requestAnimationFrame(step);

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    // window.scrollTo(0, distance*(progress/duration) + startPosition);
    window.scrollTo(
      0,
      easeInOutCubic(progress, startPosition, distance, duration)
    );
    if (progress < duration) window.requestAnimationFrame(step);
  }
}

// Easing Functions

function linear(t, b, c, d) {
  return (c * t) / d + b;
}

function easeInOutQuad(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return (c / 2) * t * t + b;
  t--;
  return (-c / 2) * (t * (t - 2) - 1) + b;
}

function easeInOutCubic(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return (c / 2) * t * t * t + b;
  t -= 2;
  return (c / 2) * (t * t * t + 2) + b;
}
/*----------------- NAVBAR ------------------*/
.navbar {
  font-size: 1.4rem;
  height: 7.5rem;
  background-color: #fff;
  border-bottom: 1px solid var(--grey-light-2);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: var(--grey-dark-2);
  box-shadow: 0 -1rem 3rem rgba(0, 0, 0, 0.2);
  max-width: 100%;
  width: 100%;
  position: fixed;
  z-index: 2;
  font-family: "Lato Bold";
  text-transform: uppercase;
}

.toggle__checkbox {
  display: none;
  visibility: hidden;
}

@media only screen and (min-width: 56.25em) /* 900px */ {
  .navbar-list {
    display: flex;
    align-items: center;
    align-self: stretch;
  }

  .navbar-list > * {
    padding: 0 2rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.5s;
  }

  .separator {
    display: block;
    width: 0.2rem;
    height: 4.5rem;
    background: var(--grey-light-2);
    padding: 0;
    margin: 0 -0.2rem;
  }

  .navbar__item:hover:not(:last-child) {
    background-color: var(--grey-light-2);
    position: relative;
    z-index: 5;
  }

  .navbar__link:link,
  .navbar__link:visited {
    color: var(--grey-dark-2);
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
  }

  .navbar__item:not(:last-child) .navbar__link i {
    margin-right: 0.5rem;
  }

  #big-icon {
    font-size: 4rem;
    z-index: 20;
  }

  .navbar__link i {
    font-size: 2rem;
  }

  .navbar__item:last-child {
    position: relative;
  }

  .navbar__item:last-child:hover::before {
    content: "";
    width: 6rem;
    height: 6rem;
    background-color: var(--grey-light-2);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .toggle {
    display: none;
  }

  .notification {
    font-size: 1rem;
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    background-color: var(--color-red);
    color: #fff;
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30;
  }
}
<nav class="navbar">
  <ul class="navbar-list">
      <li class="navbar__item">
        <a class="navbar__link" href="#sobre-mi">
          <i class="fas fa-address-book"></i>Sobre mi
        </a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link" href="#habilidades">
          <i class="fas fa-th"></i>Habilidades
        </a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link" href="english.html">
          <i class="fas fa-globe-americas"></i>Translation 
        </a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link" href="#proyectos">
          <i class="fas fa-archive"></i>Portafolio
        </a>
      </li>
      <div class="separator">&nbsp;</div>
      <li class="navbar__item">
        <a class="navbar__link" href="#certificados">
          <i class="fas fa-award" id="big-icon"></i>
          <span class="notification">7</span>
        </a>
      </li>
    </ul>
</nav>

1
  • si esta al mismo nivel de index.html de hecho seria la version en ingles del index Commented el 2 dic. 2019 a las 22:37

2 respuestas 2

1

Redacto mejor la respuesta. Lo que ocurre es que en el javascript estás usando un preventDefault en las etiquetas de los links. Eso evita que se ejecute el comportamiento por defecto, el cual es el que tratas de utilizar.

5
  • si era eso pero ahora me aparece el # en la url, ¿alguna sugerencia? y gracias :) Commented el 3 dic. 2019 a las 0:09
  • Por favor lee Cómo responder, ayudaría mucho exponer a mayor detalle el por que de tu solución, ya que así aunque es la solución parece solo un comentario y no deja claro el por que
    – user128299
    Commented el 3 dic. 2019 a las 0:11
  • Quitale el # en el <a class="navbar__link" href="#certificados"> Commented el 3 dic. 2019 a las 0:11
  • if(targetId === "#") event.preventDefaul(); pero ¿el # acaso no se usa con los id?, en los otros si uso ids Commented el 3 dic. 2019 a las 0:16
  • Ya me fije. Si usas el # para las otras cosas. Pero el caso del English.html no quieres hacer scroll, sino saltar a otra ventana. Por lo que es seguro remover el # Commented el 3 dic. 2019 a las 0:18
0

El problema no es el estilo, eso depende en que nivel se encuentre tu página "englis.html" si esta al mismo nivel de la página que carga este código

mypagina.com/default.htm
mypagina.com/english.htm

debería funcionar sin problema usando :

<a class="navbar__link" href="english.html">.

Si se encuentra afuera en un nivel anterior:

mypagina.com/paginas/default.htm
mypagina.com/english.htm

usa

<a class="navbar__link" href="../english.html">.
3
  • <a class="navbar__link" href="../english.html"> hice esto y no me funciona tenia esto <a class="navbar__link" href="english.html"> pero tampoco funciona, probe cambiar los z-index de los estilos pero tampoco Commented el 2 dic. 2019 a las 22:46
  • mmm debería funcionar sin problema, ¿sería posible copartieras la url de tu página y la de english.html ? @CeciResponde
    – Jorgesys
    Commented el 2 dic. 2019 a las 23:05
  • todavia no esta subida la estoy abriendo con live server XD, pero igual probe una url cualquiera por ejemplo la de github y no me la abre Commented el 2 dic. 2019 a las 23:19

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.