TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć widżet Scroll to Top dla swojej witryny?

12

Powrót do góry lub przewijanie do góry to funkcja umożliwiająca przejście na górę strony, klikając strzałkę zwykle umieszczoną w prawym dolnym rogu strony. Zawsze nie jest konieczne używanie obrazu dla takiej funkcji przewijania do góry. Ponieważ każdy obraz wysyła osobne żądanie HTTP do twojego serwera, sumuje się ogólny czas ładowania witryny, a dostosowywanie obrazu również nie jest łatwe. Aby temu zaradzić, oferujemy poniższy widget przewijania do góry z CSS i jQuery z ikoną niesamowitej czcionki zamiast obrazu, dzięki czemu można dostosować go do układu witryny.

Powiązane: Jak dodać scroll do górnego widżetu w witrynie Weebly?

Widget składa się z trzech części:

  • CSS
  • Scenariusz
  • HTML

1 kod CSS dla widżetu Powrót do góry

Poniżej znajduje się kod CSS widżetu i wklej go w sekcji nagłówka swojej witryny.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Uwaga: Zamiast obrazu używamy niesamowitej ikony czcionki, stąd wymagany CSS jest odpowiednio połączony.

2 Skrypt jQuery dla Widget

Poniżej znajduje się skrypt widżetu, który należy umieścić w stopce witryny.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 HTML dla widżetu

I na koniec poniżej znajduje się kod HTML, który należy umieścić w treści strony internetowej, aby umożliwić funkcję powrotu do góry.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Dostosowywanie funkcji Powrót do góry

Zaletą korzystania z tego widżetu jest możliwość dostosowania pełnej funkcji do własnych potrzeb. Oto niektóre opcje dostosowywania dla Ciebie:

Szybkość przewijania

Domyślna prędkość przewijania jest ustawiona w skrypcie na 600, którą można zwiększać lub zmniejszać.

Funkcja Kod Gdzie patrzeć
Szybkość przewijania czas trwania zm = 600; Scenariusz

Pozycja wyświetlania ikony przewijania

Ikona strzałki zacznie się wyświetlać, gdy pasek przewijania znajdzie się na pozycji 200px od góry, która jest zdefiniowana w skrypcie poniższym kodem:

Funkcja Kod Gdzie patrzeć
Pozycja początkowa ikony przewijania było przesunięcie = 200; Scenariusz

Możesz zmienić pozycję początkową według potrzeb.

Pozycja ikony

Domyślnie ikona strzałki w górę będzie wyświetlana 60 pikseli w górę i 55 pikseli od prawego dolnego rogu, zgodnie z definicją w stylu CSS. Możesz to zmienić metodą prób i błędów, aby sprawdzić odpowiednią pozycję dla swojej witryny.

Funkcja Kod Gdzie patrzeć
Pozycja przewijania ikony w prawym dolnym rogu szerokość: 55px;wysokość: 60px; Styl

Styl ikon

Użyliśmy niesamowitej ikony czcionki „fa-arrow-circle-up", którą możesz zmienić w kodzie HTML.

Funkcja Kod Gdzie patrzeć
Powrót do góry Styl ikon <i class=”fa fa-strzałka-kółko-w górę”></i> HTML

Zapoznaj się z sekcją ikon kierunkowych na liście niesamowitych ikon czcionek, aby użyć alternatywnej ikony dla swojej witryny.

Rozmiar ikony

Domyślne 50px jest używane jako rozmiar czcionki dla ikony w stylu CSS, który możesz zmienić zgodnie z potrzebami.

Funkcja Kod Gdzie patrzeć
Powrót do góry Rozmiar ikony rozmiar czcionki: 50px; Styl

Kolor ikony

Jest to najważniejsza część dostosowywania, w której kolor ikony czcionki można łatwo zmienić, aby dopasować go do układu witryny. Poszukaj kodu „kolor: #808080;” w kodzie CSS i zmień go na dowolny kolor, jak potrzebujesz.

Funkcja Kod Gdzie patrzeć
Powrót do góry Kolor ikony kolor: #808080; Styl

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów