Próbuję zrobić przycisk, jeśli kliknął go, przewija płynnie do określonej div na stronie za pomocą CSS! (Bez JS lub jQuery). Ex: http://jsfiddle.net/yypkm/3/ Nie mogłem zrozumieć w kodzie, który dał, co dokładnie przewija płynnie? Mój kod: HTML:

<html>
<head>
<head>
  <ul class="actions">
      <li><a href="#description" class="button" id="cn">Continue</a></li>
  </ul>
        <section id="description">
            <h2 style="font-weight: 700; font-size: 1.5em; margin-top: 2em;">Description</h2>
            <section id="descr">
                    <div class="image desc"><img src="https://cdn.lynda.com/course/439683/439683-636441077028502313-16x9.jpg" width="800" height="550" title="Our company">
                    </div>
                    <div class="desc">
                        <h2>About Company</h2>
                        <p>Sometimes the mouse, but now it was the makeup of chocolate sauce ante powerful protein manufacturing sad sauce through a gateway.</p>
                    </div>
            </section>
        </section>
</html>

Mój CSS:

/* Button */
    .button {
        background: #ffff00;
        color: #000;
        border-radius: 4px;
        border: 0;
        display: inline-block;
        font-weight: 700;
        height: 2.95em;
        line-height: 3em;
        padding: 0 1.5em;
        text-decoration: none;
        text-align: center;
        margin-top: 1em;
    }
#descr {
        display: flex;
        height: 90vh;
    }
        #descr .desc {
            padding: 3.5em 0 1.5em 0;
            padding-left: 2em;
            padding-right: 2em;
            background: #afdeed;
            width: 50%;
        }
        .image.desc img {
            text-align: center;
            box-shadow: 5px 5px 20px;
        }
        .image.desc img {
            animation: move 2s ease-in-out infinite;
            animation-direction: alternate-reverse;
        }
        @-webkit-keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(2.5em);
            }
        }
        .image.desc:hover img {
            animation: rotate 2s ease-in-out infinite;
            animation-direction: alternate-reverse;
        }

        @-webkit-keyframes rotate {
            0% {
                transform: translate(-5em);
            }
            25% {
                transform: rotate(20deg);
            }
            50% {
                transform: translate(5em);
            }
            75% {
                transform: rotate(-20deg);
            }
        }

Chcę, aby przycisk kliknął, przewiń się płynnie do następnego div!

0
Imperions 4 czerwiec 2018, 17:05

5 odpowiedzi

Najlepsza odpowiedź

Właściwie jest on nawet komentowany w CSS włączony kod:

/*
 *Scrolling
 */

a[ id= "servicios" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "galeria" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}
a[ id= "contacto" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}

Dodaj do tego Fakt, że panel klasa ma następujące elementy:

.panel {
    [...]
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    [...]
}

To sprawia, że porusza się płynnie zamiast natychmiastowego.

/* Button */
    .button {
        background: #ffff00;
        color: #000;
        border-radius: 4px;
        border: 0;
        display: inline-block;
        font-weight: 700;
        height: 2.95em;
        line-height: 3em;
        padding: 0 1.5em;
        text-decoration: none;
        text-align: center;
        margin-top: 1em;
    }
    #descr {
        display: flex;
        height: 90vh;
    }
    #descr .desc {
        padding: 3.5em 0 1.5em 0;
        padding-left: 2em;
        padding-right: 2em;
        background: #afdeed;
        width: 50%;
    }
    .image.desc img {
        text-align: center;
        box-shadow: 5px 5px 20px;
    }
    .image.desc img {
        animation: move 2s ease-in-out infinite;
        animation-direction: alternate-reverse;
    }
    @-webkit-keyframes move {
        0% {
            transform: translate(0);
        }
        100% {
            transform: translate(2.5em);
        }
    }
    .image.desc:hover img {
        animation: rotate 2s ease-in-out infinite;
        animation-direction: alternate-reverse;
    }

    @-webkit-keyframes rotate {
        0% {
            transform: translate(-5em);
        }
        25% {
            transform: rotate(20deg);
        }
        50% {
            transform: translate(5em);
        }
        75% {
            transform: rotate(-20deg);
        }
    }
    
/*
 *Scrolling
 */

.panel {
    width: 100%;
    height: 500px;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

a[ id= "descLink" ]:target ~ #description section.panel {
    -webkit-transform: translateY( -100px);
    transform: translateY( -100px );
}
<html>
<head>
</head>
  <a id="descLink"/>
  <ul class="actions">
      <li><a href="#descLink" class="button" id="cn">Continue</a></li>
  </ul>
        <section id="description">
            <h2 style="font-weight: 700; font-size: 1.5em; margin-top: 2em;">Description</h2>
            <section id="descr" class="panel">
                    <div class="image desc"><img src="https://cdn.lynda.com/course/439683/439683-636441077028502313-16x9.jpg" width="800" height="550" title="Our company">
                    </div>
                    <div class="desc">
                        <h2>About Company</h2>
                        <p>Sometimes the mouse, but now it was the makeup of chocolate sauce ante powerful protein manufacturing sad sauce through a gateway.</p>
                    </div>
            </section>
        </section>
</html>

Dodałem <a id="descLink"/> i zmieniłem href, więc łączy to, a ja dodałem również klasę panel do sekcji descr do pracy.
Następnie możesz poprawić wartość translateY w CSS, aby zobaczyć, jak to sprawia.

1
Rafalon 4 czerwiec 2018, 14:55

Potrzebujesz jQuery dla efektu .click. Prosty, gładki przycisk, który zabiera Cię dwa określony obszar na tej samej stronie, tak jak:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
1
billy.farroll 4 czerwiec 2018, 14:11

Prawdopodobnie udało ci się już pracować, ale tutaj jest znacznie łatwiejsze rozwiązanie, które szukają prostej odpowiedzi.

html {
  scroll-behavior: smooth;
}
1
LP98 28 styczeń 2019, 13:12

Rozwiązanie, którego używam do tego w całym tablicy. Wymaga jQuery:

(function($) {
    $(document).ready(function() {
        // Bind to body and use event bubbling
        // Much more efficient than binding to all links on the page
        $('body').on('click', 'a', function(event) {
            var href = $(this).attr('href');

            // Default behaviour if the link isn't an anchor-link
            if(!href || href.substring(0, 1) != '#') {
                return true;
            }

            // Try for link to an id attribute
            var target = $(href);

            // If the anchor destination is added as <a name="" - look for this instead
            if(!target.length) {
                target = $('a[name="' + href.replace('#', '') + '"]:first');

                // If still no target, default behaviour
                if(!target.length) {
                    return true;
                }
            }

            event.preventDefault();

            var targetTop = parseInt(target.offset().top),
                currentTop = parseInt($window.scrollTop());

            // Don't lock scrolling if we're already at the anchor
            if(targetTop != currentTop) {
                $('html, body').stop().animate({
                    'scrollTop': Math.max(0, targetTop)
                }, 500);
            }

            return false;
        });
    });
})(jQuery);

Jeśli używasz karuzeli lub kart lub innych elementów interfejsu użytkownika, które opierają się na łączeniu ID, może być konieczne modyfikowanie selektora, na przykład, jeden z moich witryn jest to wdrożone jako:

$('body').on('click', 'a:not(.carousel-control)', function(event) {
0
Scoots 4 czerwiec 2018, 14:33

W rzeczywistości wpływ w demonstracji, z którą powiązałeś, nie jest prawdziwym przewijaniem, to rodzaj przewijania emulacji. Istnieją dwie główne części: :target pseudo -Class, który pasuje do elementu z identyfikatorem odpowiadającym części bieżącego adresu URL, a właściwość {X1}}, która animuje płynnie dowolną inną właściwość CSS (w tym przypadku }) własność. Ponieważ Rafalon prawidłowo wskazał, część "magiczna" część kodu CSS jest

a[ id= "galeria" ]:target ~ #main article.panel {
    transform: translateY( -500px );
}

Ten selektor CSS wybiera element <article> z klasy panel w elemencie z identyfikatorem #main, która przechodzi po elemencie <a> z <a> X4}} atrybut w tym samym pojemniku, gdy element <a> jest nawigowany (tj. Gdy adres URL strony kończy się #galleria). Jeśli ten warunek jest zadowolony, ta zasada CSS ma zastosowanie do tego <article> właściwość transform, która przenosi ten element o 500px powyżej. A ponieważ elementy .panel mają {{x10}} zestaw, pionowa pozycja tego panelu zmienia się niezwłocznie, ale dla 0,6S (pierwsze przyspieszenie, a następnie spowolnienie, z powodu łatwościowej Funkcja rozrządu).

Należy jednak pamiętać, że podejście to jest raczej hacky i ma wiele ograniczeń. Ale CSS ma Natywny właściwość dla prawdziwego płynnego przewijania - scroll-behavior:smooth (choć nie wszystkie przeglądarze wspierają go, może to być dobre progresywne wzmocnienie projektów).

0
Ilya Streltsyn 4 czerwiec 2018, 14:56