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

Jak dodać przycisk przewijania do góry w witrynie Weebly?

0

Przewiń do góry to prosta i przydatna funkcja służąca do przechodzenia na górę strony internetowej w dowolnym miejscu od dołu. Być może zauważyłeś strzałkę w górę w prawym dolnym rogu większości witryn i klikając obraz strzałki zostaniesz przeniesiony na górę tej strony. Jest to przydatna funkcja zwłaszcza w przypadku stron o długiej treści. W tym artykule wyjaśniono, jak dodać funkcję przewijania do góry lub z powrotem do góry w bezpłatnej witrynie Weebly. Poznaj ponad 200 bezpłatnych samouczków Weebly, aby zoptymalizować swoją witrynę Weebly.

Oto podsumowanie kroków związanych z dodaniem przycisku przewijania do góry lub z powrotem do góry:

  1. Pobierz i zmodyfikuj plik JavaScript przewiń do góry.
  2. Pobierz obraz strzałki w górę.
  3. Prześlij plik JavaScript i obraz do swojej witryny Weebly.
  4. Dodaj Przewiń do góry na wszystkich stronach.
  5. Dodaj przewijanie do góry na określonych stronach.

Omówmy szczegółowo każdy krok.

Krok 1: Pobierz i zmodyfikuj plik skryptu

  • Pobierz plik zip i rozpakuj go do pliku JavaScript o nazwie „scrolltopcontrol.js".
  • Otwórz plik w edytorze takim jak Notatnik lub TextEdit i poszukaj kodu img src=”up.png”.
  • Zastąp go ścieżką obrazu swojej witryny Weebly, jak poniżej:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • Zapisz zmodyfikowany plik.

Krok 2: Pobieranie obrazu strzałki w górę

Krok 3: przesyłanie plików do witryny Weebly

  • Zaloguj się do swojego konta Weebly i wybierz witrynę, którą chcesz dodać przewiń do górnej funkcji.
  • W edytorze Weebly przejdź do zakładki „Motyw”, a następnie kliknij przycisk „ Edytuj HTML/CSS “.
  • Kliknij ikonę „+” w zakładce „Zasoby”, wybierz „Prześlij plik(i) z listy rozwijanej i prześlij zmodyfikowany plik „scrolltopcontrol.js”.
  • W ten sam sposób prześlij plik obrazu „up_arrow.png”.
  • Zapisz motyw, jeśli po raz pierwszy przesyłasz pliki do witryny, zostaniesz poproszony o wprowadzenie nowej nazwy motywu dla witryny. Wprowadź nową nazwę motywu i zapisz zmiany.

Teraz prawie skończyłeś i masz dwie opcje dodania funkcji przewijania do góry:

  1. Dodaj na wszystkich stronach witryny.
  2. Tylko na określonych stronach.

Jak dodać przycisk przewijania do góry w witrynie Weebly?

Przesyłanie pliku do witryny Weebly

Krok 4: Dodanie Scroll to Top na wszystkich stronach

Skopiuj poniższy kod i zmodyfikuj go, zastępując „yoursitename.weebly.com” swoją prawdziwą nazwą witryny Weebly.

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Przejdź do zakładki „Ustawienia” w edytorze Weebly i wklej kod w polu „Kod nagłówka” w sekcji „SEO”, jak pokazano na poniższym obrazku.

Jak dodać przycisk przewijania do góry w witrynie Weebly?

Dodaj kod na stronie głównej witryny Weebly

Zapisz zmiany i opublikuj swoją witrynę, aby podczas przewijania w dół zobaczyć przycisk strzałki umieszczony w prawym dolnym rogu. Możesz zobaczyć obraz strzałki w górę na wszystkich swoich stronach, a kliknięcie go przeniesie Cię na górę witryny.

Ostrzeżenie: Jeśli funkcja przewijania nie działa, spróbuj wkleić kod w sekcji „Kod stopki” zamiast w sekcji „Kod nagłówka”.

Krok 5: Dodawanie przewijania do góry na określonych stronach

Przejdź do zakładki „Strony” w edytorze Weebly i wybierz stronę, do której chcesz dodać funkcję przewijania do góry. Kliknij link „Ustawienia zaawansowane” i wklej powyższy kod w polu „ Kod nagłówka “, jak pokazano na poniższym obrazku. Pamiętaj, aby zastąpić „yoursitename.weebly.com” prawdziwą nazwą witryny Weebly.

Jak dodać przycisk przewijania do góry w witrynie Weebly?

Dodaj kod na jednej stronie Weebly

Zapisz zmiany i opublikuj swoją witrynę. Otwórz konkretną stronę i zobacz, że przycisk strzałki jest teraz umieszczony w prawym dolnym rogu strony podczas przewijania w dół.

Używanie tekstu od początku do góry

Jeśli chcesz użyć tekstu zamiast obrazu, po prostu dodaj poniższy kod w dowolnym miejscu na stronie za pomocą elementu „ Kod osadzania “.

<a href="#top">Back to Top</a>

Możesz również użyć tego kodu w polu „Kod stopki” w sekcji „SEO” na karcie „Ustawienia”, aby dodać „Powrót do góry” w stopce witryny. użyj i
tagów, aby odpowiednio wyrównać tekst.

Uwaga: zamiast #top możesz użyć dowolnej kotwicy HTML na swojej stronie, aby przewinąć do tej pozycji.

Zmiana docelowego miejsca docelowego kontrolki „Scroll To Top”

Po kliknięciu strzałki w górę pasek przewijania domyślnie zostanie przeniesiony na górę strony. Jeśli chcesz przejść do innej pozycji, możesz to kontrolować, zmieniając atrybut „scrollto” w pliku .js. Na przykład zmiana „scrollto: 0″ na „scroll: 100″ przesunie pasek przewijania o 100 pikseli poniżej górnej pozycji. Możesz również przenieść pozycję do dowolnego elementu zdefiniowanego na Twojej stronie, wykonując poniższe dwa kroki.

  • Krok 1 – Zdefiniuj element – ​​Na przykład, aby zdefiniować H2 użyj elementu kodu embed i dodaj poniższy kod:
<h2 id="movehere">Move the Scroll bar here </h2>
  • Krok 2 – Następnie zmień atrybut jako scrollto: „przenieś się” w pliku .js, jak pokazano poniżej:
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Spowoduje to przesunięcie paska przewijania do tej pozycji nagłówka H2, gdy klikniesz strzałkę w górę lub link z powrotem na górę.

Źródło nagrywania: 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