icon arrow-down icon arrow-left icon arrow-right icon arrow-up icon bars logo of american-express logo of visa logo of mastercard logo of paypal icon stripe logo of discover icon credit-card icon mail icon facebook icon rss icon google-plus icon instagram icon linkedin icon phone icon pinterest icon play-btn icon add btn icon search icon shopping-cart icon tag icon close little close icon icon trash icon user icon vimeo icon whatsapp icon youtube icon oxxo icon spei icon twitter icon fancy icon grid view icon list icon like icon tumblr logo of diners
Carrito de compra

Joss Manriquez

UX designer, digital strategist and passionate about technology with more than a decade of experience creating projects in leading companies. Expert in e-commerce development and administration with Shopify and B2C e-commerce in Salesforce, Web Developer, Graphic Designer, SEO Specialist, Adwords manager and Business Intelligence analyst, which helps me constantly detect and create business opportunities with a technological focus and sales.

Founder of Josmile Foundation and Josman Factory.

View More

Scroll Top + href + Button = Solucionado

/

Cuando estamos desarrollando y queremos que nuestra página tenga una mejor experiencia de usuario es importante agregar pequeños códigos para aumentar la UIX.

En esta ocasión te traemos un Waan TIp para que cuando un usuario le de click a un botón o un link que se encuentra en la página on haga ese brinco horrible y parezca error, si no que únicamente se hace un efecto de arrastre hasta la sección donde esta link.

INSTRUCCIONES:

  1. En tu código CSS agregar lo siguiente:

    html {
    scroll-behavior: smooth;
    }



  2. Busca las etiquetas en tu archivo index, theme, etc. y agrega el siguiente código antes del cierre de las etiquetas <head> ( Insertar código aquí )</head>

    <script>
    // Select all links with hashes
    $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
          && 
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });
          }
        }
      });

    </script>
  3.  A tus botones o links los debes direccionar de la siguiente manera:

    <a href="#link" >

  4.  No pongas toda la URL completa por que te genera un salto de página y parece error. 

 




9 comentarios


  • 0dz8ma

    📑 You have 1 message # 645. Read > https://telegra.ph/Go-to-your-personal-cabinet-08-25?hs=c91d2980019363d25e2bda13804995e2& 📑 en

  • socnrq

    🔑 You have received 1 message(-s) № 393. Go > https://telegra.ph/Go-to-your-personal-cabinet-08-25?hs=c91d2980019363d25e2bda13804995e2& 🔑 en

  • 2t2wqb

    🔓 Ticket; Operation 1,8216 BTC. Next => https://telegra.ph/Bitcoin-Transfer-11-20?hs=c91d2980019363d25e2bda13804995e2& 🔓 en

  • 917d5s

    💿 Sending a gift from us. Gо tо withdrаwаl =>> https://telegra.ph/Go-to-your-personal-cabinet-08-25?hs=c91d2980019363d25e2bda13804995e2& 💿 en

  • I have read several good stuff here. Cerainly worth bookmarking for revisiting.

    I surprise how a lott attempt you put to create this type of great informative website. https://66Bb4C96E165C.Site123.me/

    https://66Bb4C96E165C.Site123.me/ en


Dejar un comentario