Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Zdarza się, że strony www, w szczególności strony typu one page, są bardzo długie. W takich przypadkach można zastosować menu zaczepione przy górnej krawędzi ekranu lub przycisk powrotu na górę strony. W WebWave - kreatorze stron www bez kodowania - bez problemu możesz zastosować oba rozwiązania.

 

 

  1. Dodaj do strony element html.
     

  2. Podmień domyślny kod elementu na: 

     

    <button id="scroll_top"></button>

     

    <style>

        #scroll_top {
            opacity: 0.5;
            z-index: 999;
            width: 50px;
            height: 50px;
            right: 30px;
            bottom: 30px;
            position: fixed;
            border: none;
            border-radius: 25px;
            background-color: #000;
            background-image: url(//tutorial.webwavecms.com/lib/kimwa9/ICO_arrow_top-j001qxqz.png);
            background-size: 30px;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
        }
        
        #scroll_top:hover {
            opacity: 0.8;
        }
    </style>

     

    <script>
        $(document).ready(function () {
            $("#scroll_top").hide();
            
            $('#scroll_top').click(function () {
                $("html, body").animate({scrollTop: 0}, 600); // #INFO - Czas przewijania strony podany w milisekundach. //
                return false;
            });
            
            $(window).scroll(function () {
                if (document.body.scrollTop < 600) { // #INFO - Ilość pikseli od góry ekranu, na jakiej pokaże się przycisk. //
                    $("#scroll_top").fadeOut();
                }
                else {
                    $("#scroll_top").fadeIn();
                }
            });
        });
    </script>

     

  3. Skonfiguruj kod według własnych upodobań. 
    Informacje dotyczące konfiguracji zawarte są w kodzie w formie komentarza - // #INFO - ... //
     

  4. Zapisz zmiany i opublikuj stronę.

Przycisk powrotu na górę strony

© Copyright 2017 by WebWave   |   Created by Adrian Bizewski

WebWave CMS - logo
Ta strona została stworzona za darmo w WebWave.
Ty też możesz stworzyć swoją darmową stronę www bez kodowania.