Oto ogromna lista wtyczek scroll jQuery dla Twojej witryny. Różne sztuczki z przewijaniem przyszły do ​​nas nie tak dawno z zagranicy i odgrodziły szereg nowoczesnych portali i stron, które chciały się wyróżnić. Praca nad przewijaniem w pionie mogłaby znacznie poprawić konwersje i niewątpliwie wrażenia użytkownika. Dzięki ciekawym podejściom JS + CSS3 możesz ulepszyć interfejs swojej witryny. Jeśli dodasz trochę wyobraźni, możesz uzyskać coś wyjątkowego dla swojej witryny z dowolnej wtyczki. W końcu każda strona stara się wyróżniać z szarej masy różne sposoby. Dzięki scrollowaniu niektóre strony można przenieść na stronę z zaimplementowaną wtyczką, co usprawni paragon ważna informacja użytkownik. Ta technologia najlepiej nadaje się do różnych portfolio lub prezentacji produktów itp.

Przejdźmy od razu do rzeczy.

Chytry

Chytry jest Biblioteka JavaScript dla ulepszonego przewijania w jedną stronę z obsługą nawigacji elementów. Może być używany jako prosty zamiennik przewijania, jako narzędzie nawigacyjne lub jako świetny interfejs nawigacji i animacji dla stron paralaksy.

jQuery ScrollPath

Jest to wtyczka do definiowania niestandardowych ścieżek przewijania.

okna

Animuj zwój

AnimateScroll to wtyczka jQuery, która umożliwia przewijanie do dowolnej części strony, po prostu wywołując funkcję animatescroll() z identyfikatorem lub klasą elementu, do którego chcesz przewinąć.

scrollme

Podczas przewijania strony ScrollMe może skalować, obracać, tłumaczyć i zmieniać przezroczystość elementów na stronie. Jest łatwy w konfiguracji i nie wymaga ani jednej linii kodu javascript.

nalot

Prosta wtyczka, która „przypina” element do górnej części okna przeglądarki, przewijając go, zawsze mając go na widoku. Ta wtyczka działa w witrynach wielostronicowych, ale ma dodatkowe funkcje dla układów z jednym pagerem.

blok przewijania

blok przewijania to wtyczka jQuery, która zamienia zestaw elementów w bloki i renderuje je po jednym ekranie na raz. Pomysł polega na podzieleniu strony na kawałki w celu lepszej prezentacji i przepływu użytkowników. Scroll lock automatycznie zmienia rozmiar strony.

Starscroll

Utwórz div jako tło... aktywuj wtyczkę; animacja przewijania. Wtyczka automatycznie ustawi div, aby działał niewidoczny.

przewijanie talii

przewijanie

przewijanie to wtyczka jQuery do tworzenia prostego systemu autocue/telepromptera do przewijania linii tekstu.

scrollorama

Stellar.js

Stellar.js to wtyczka jQuery, która zapewnia efekty przewijania paralaksy dla dowolnego elementu przewijania.

super przewijanie orama

Paralaksa

Responsywne przewijanie w 3D

jQuery Scrollify

Wtyczka jQuery, która pomaga przewijać i przyciągać do sekcji. Kompatybilny z dotykiem.

vivus.js

Vivus to lekka klasa JavaScript (bez zależności), która pozwala animować SVG, dając im możliwość rysowania.

jQuery SlimScroll

slimScroll to mała (4,6 KB) wtyczka jQuery, która przekształca dowolny div w obszar przewijania z ładnym paskiem przewijania.

jQRangeSlider

jQuery pin

Czy kiedykolwiek chciałeś przypiąć coś z boku tekstu? Czy kiedykolwiek potrzebowałeś cienkiego, lepkiego elementu, który pozostaje na swoim miejscu podczas przewijania w dół?

jQuery Pin tutaj do pomocy! Włóż dowolny element na górze pojemnika. Łatwo go wyłącz na mniejsze rozmiary ekran, na którym nie ma miejsca na tego rodzaju wybryki.

Nieskończony przewijanie AJAX

Przewijanie

Przewijanie to wtyczka jQuery i polyfill dla stylu przewijania Safari Mobile. Jest przeznaczony do użytku w przeglądarkach komputerowych z Ostatnia wersja jQuery.

jQuery.localScroll

Parallax ImageScroll - wtyczka jQuery

jQuery i wtyczka kompatybilna z amd do tworzenia efektu paralaksy, jak pokazano na spotify.com.

pełnaStrona.js

Lekka i łatwa w użyciu wtyczka do tworzenia stron internetowych z przewijaniem pełnoekranowym (znanych również jako strony typu single page, wstęp), możesz także dodać poziome suwaki w sekcjach witryny.

Parallax.js

Jarallax

Jarallax jest biblioteką JavaScript o otwartym kodzie źródłowym kod źródłowy, co upraszcza ustawienie CSS oparte na interakcji. Jarallax ułatwia tworzenie strony internetowej z przewijaniem paralaksy

jInvertScroll

jQuery fullContent.js

jQuery Pełna zawartość pozwala na pełne tworzenie stron internetowych.

jQuery jedna strona przewijania

Utwórz witrynę z przewijaniem jednej strony (witryna iPhone 5S) za pomocą wtyczki do przewijania jednej strony.

Wtyczka jQuery Parallax

jQuery Parallax to skrypt, który symuluje efekt paralaksy widoczny na nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-kotwica.js

Portfoliojs

Portfoliojs to lekka wtyczka Galerie jQuery za piękne, przewijane w poziomie obrazy, które obsługują przeglądarki na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.

Wtyczka przewijania paralaksy

Paralaksa przewijania to nowa wtyczka jQuery, która łączy efekt paralaksy z paskami przewijania i kółkiem myszy. To pozwala zdjęcie w tle lub cokolwiek innego, aby przewijać w innym tempie niż strona internetowa, gdy użytkownik przewija. Uzyskany efekt paralaksy to łatwy sposób na stworzenie iluzji głębi na Twojej stronie internetowej.

przewiń kartę

kręty

przewijanie

Oddzielna biblioteka przewijania paralaksy dla urządzenia mobilne(Android + iOS) i PC. Brak jQuery. Po prostu zwykły JavaScript (i trochę magii).

SMINT

Sminta to prosta wtyczka jQuery, która pomaga w nawigacji na stronach internetowych typu single page.

jQuery niestandardowy przewijak treści

Wysoce konfigurowalna wtyczka przewijania jQuery. Funkcje obejmują pionowy i/lub poziomy pasek przewijania, niestandardowe tempo przewijania, kółko myszy (poprzez wtyczkę jQuery mousewheel), obsługę klawiatury i ekran dotykowy gotowe do użycia motywy i dostosowywanie za pomocą za pomocą CSS, wsparcie dla kierunku RTL, opcje opcji pełnej kontroli funkcji scroll, metody wyzwalania akcji takich jak scroll, update, destroy itp.

Wtyczka paska przewijania

Wtyczka przewijania w górę (jQuery) ukrywa górny pasek podczas przewijania w dół i pokazuje go podczas przewijania w górę. Jest to szczególnie przydatne w przypadku interfejsy mobilne aby zaoszczędzić cenną przestrzeń.

Przyklejone nagłówki tabeli

jQuery panelSnap

isInViewport.js

wodospad

wtyczka jquery wodospad, takich jak Pinterest, huaban.com, faxianla.com

przewijak

jQuery.SerialScroll

jscroll

jscroll to wtyczka nieskończonego przewijania jQuery napisana przez Philipa Klausinsky'ego. Nieskończone przewijania; znany również jako powolne ładowanie, nieskończone przewijanie, autopiracja, nieskończone strony itp.

ZwińPrzewiń

Wtyczka scrollUp jQuery

przewiń do góry to lekka wtyczka jQuery do tworzenia niestandardowej funkcji Scroll Up, która z łatwością będzie działać z każdą witryną.

multiScroll.js

Twórz podzielone strony za pomocą dwóch pionowych pasków przewijania. Kompatybilny z telefony komórkowe oraz urządzenia i stare bowsery, takie jak IE 8.

Dowolny przewijacz listy

qpScroll

qpScroll to wtyczka jQuery, która tworzy tło paralaksy dla dowolnej strony lub div. Konfiguracja jest bardzo łatwa. Można go dodać do dowolnej istniejącej strony bez konieczności zmiany znaczników HTML.

jQuery Trzymaj je

Parallax.js

Silnik paralaksy reaguje na orientację urządzenia inteligentnego. Tam, gdzie nie ma żyroskopu ani sprzętu do wykrywania ruchu, zamiast tego używana jest pozycja kursora.

Slinky.js

Slinky.js to wtyczka jQuery do tworzenia pięknych przewijanych list nawigacyjnych z tytułami układającymi się w stos.

nieskończoność.js

nieskończoność.js to UITableView dla sieci: przyspiesza przewijanie długich list i zapewnia płynność i stabilność niekończących się kanałów dla użytkowników. Jest mały, sprawdzony i bardzo wydajny.

Arbitralna kotwica

Punkty trasy

Punkty trasy to biblioteka, która ułatwia wykonywanie funkcji za każdym razem, gdy przechodzisz do elementu.

jQuery.kinetyczny

Przewijanie paska postępu

Na ten efekt składają się dwa elementy. Treść i paski. Każda sekcja treści ma identyfikator, który pomaga obliczyć procent. Każdy pasek ma link do płynnego przewijania do tej sekcji.

jQuery płynne przewijanie Div

Płynne przewijanie div to wtyczka jQuery, która przewija zawartość poziomo w lewo lub w prawo.

jQuery Story Opowieść

Prosta wtyczka jQuery rozszerzająca wtyczkę animateScroll o możliwości pojedynczej strony.

Wtyczka przewijania animacji jQuery

jQuery.ScrollTo

Niekończące się przewijanie jQuery Plugin

Nieskończone przewijanie (lub przewijanie nieskończone) to popularna technika wśród stron 2.0, takich jak Google Reader i Live Image Search, gdzie zamiast stronicowania elementów przy użyciu tradycyjnej techniki paginacji, strona po prostu ładuje nowe elementy dołączone na końcu.

W ciągu ostatnich kilku lat popularność witryn jednostronicowych (przewijanych) znacznie wzrosła. Mimo że ten gatunek witryn i nie dla wszystkich, warto wiedzieć, jak działają. Dzisiaj pokażę jak stworzyć prostą jednostronicową (przewijaną) witrynę za pomocą jQuery.

Zanim zaczniemy, możesz obejrzeć Demo.

Cóż, zaczynajmy...

Stworzymy:

HTML

Znaczniki (HTML) strony będą niezwykle proste.

Najpierw stwórzmy nawigację.

Co zrobiliśmy: element nav ma szerokość 100% , więc jego szerokość będzie równa szerokości element nadrzędny. W przypadku nav właściwość position jest ustawiona na fixed , więc podczas przewijania strony element nav zawsze będzie znajdował się przed oczami użytkownika. Aby stworzyć nawigację, umieściliśmy tag ul w tagu nav.

Zalety:

1. Jeśli użytkownik ma wyłączony javascript, linki nadal działają.
2. Na jQuery pomoc będziemy czytać atrybut href z każdego linku.

Teraz, gdy stworzyliśmy prosty pasek nawigacyjny, możemy przejść do głównej zawartości strony.

Jak widać, znaczniki są niezwykle proste. Składa się z bloku treści zawierającego akapity (p). Każdy akapit ma identyfikator powiązany z linkiem w naszej nawigacji.

css

Zanim przejdziesz do CSS, nie zapomnij dołączyć . Eliminuje problemy związane z niekompatybilnością różnych przeglądarek i pozwala pracować bez zastanawiania się, czy strona będzie wyglądać tak samo we wszystkich nowoczesnych przeglądarkach.

Zacznijmy od ostylowania głównej zawartości strony, co jest bardzo proste.

Treść ( rodzina czcionek: arial; rozmiar czcionki: 15px; wysokość linii: 25px; kolor: #515151; background: #fdfdfd; ) #content ( szerokość: 500px; margines: 0 auto; padding-top: 40px; wysokość : 2000px; ) #treść p ( margin-bottom: 25px; )

W treści definiujemy kolory tekstu i tła; blok treści ma szerokość 500 pikseli i jest wyśrodkowany. Wartość padding-top bloku treści to 40px — jest to zrobione, aby nawigacja nie blokowała górnych 40px treści. Wysokość to 2000px, aby zmieścić się w treści i pokazać przewijanie. Chociaż z reguły nie jest to konieczne. Każdy akapit ma dolny margines o wielkości 25 pikseli, dzięki czemu można zobaczyć, gdzie kończy się jeden akapit, a zaczyna drugi.

Przejdźmy teraz do nawigacji:

Nav (szerokość: 100%; pozycja: ustalona; wysokość: 40px; tło: białe; obramowanie: 1px solid #CACACA; border-top: brak; -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box -shadow: 0px 0px 3px 1px #ebebeb;box-shadow: 0px 0px 3px 1px #ebebeb; ) nav ul ( szerokość: 750px; margines: 0 auto; ) nav ul li( float: lewo; szerokość: 150px; text-align : center; ) nav ul li a ( line-height: 40px; font-size: 16px; text-decoration: none; color: #515151; border-bottom: 1px dotted #515151; ) nav ul li a:hover( color : #000; )

Aby nawigacja obejmowała całą szerokość przeglądarki, ustaw jej szerokość na 100% . Aby utrzymać nav na ekranie podczas przewijania, ma deklarację position:fixed. Wysokość to 40px, co jest całkiem normalne dla pozycji poziomej górne menu. Zastosowano prosty styl, aby nadać uroczemu wyglądowi. Ulica jest wyśrodkowana i ma szerokość 750px, dzięki czemu każde łącze ma wystarczająco dużo miejsca. Każde li jest pływające, więc wszystkie linki znajdują się w tej samej linii. Wreszcie łącza mają również prosty styl.

jQuery

Działa to w następujący sposób: po kliknięciu łącza nawigacyjnego zostanie on przewinięty do akapitu, na który wskazuje łącze.

Jak zawsze zacznijmy od funkcji document.ready

$(dokument).gotowy(funkcja()( ));

Teraz, zanim przejdziemy do funkcji click, napiszmy funkcję scrollToDiv, która przewinie do wybranego przez nas bloku. Będą 2 parametry - element do przewijania oraz wysokość paska nawigacyjnego u góry strony.

Funkcja scrollToDiv(element,navheight)( )

Teraz opiszemy trzy zmienne, będziemy ich potrzebować do dokładnego przewijania.

Funkcja scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; )

Zmienna offset jest offsetem elementu. Jest używany przez zmienną offsetTop do pobrania wartości top . W efekcie otrzymujemy odległość od góry strony do elementu. Zmienna totalScroll odpowiada za odległość, jaką przeglądarka potrzebuje, aby przewinąć stronę. Bez Górny panel nawigacji, wartość przewijania będzie równa wartości offsetTop. Jednak przy obliczaniu zmiennej totalScroll musimy pamiętać, że nasz pasek nawigacyjny blokuje górne 40 pikseli treści. Pomoże nam tutaj parametr navheight.

Na koniec przewiń stronę:

$("body,html").animate(( scrollTop: totalScroll ), 500);

Funkcja animowania jQuery pozwoli nam zaimplementować płynne przewijanie w wybrane miejsce na stronie. W tym przypadku animacja trwa 500 milisekund.

Właściwość scrollTop pozwala ustawić wielkość przewijania strony (w pionie).

Oto pełna funkcja scrollToDiv:

Funkcja scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $("body,html").animate(( scrollTop: totalScroll ), 500) ; )

Przejdźmy do funkcji kliknięcia.

$("nav ul li a").click(function()( return false; ));

To tylko szkielet funkcji klikania. Zadeklarowanie zwrotu false na końcu uniemożliwi przeglądarce podążanie za linkiem.

Zanim będziemy mogli przekazać element do funkcji, musimy znaleźć dla niego nazwę.

Varel = $(to).attr("href"); var elWrapped = $(el);

Zmienna el zawiera wartość atrybutu href. Aby jQuery używało zmiennej el, musi być ona opakowana w elWrapped . Nie można wykonać następującego kodu jQuery:

#paragraf1.przesunięcie();

Ale może to zrobić:

$("#paragraf1").offset();

Dlatego potrzebna jest zmienna elWrapped.

Pełna funkcja kliknięcia:

$("nav ul li a").click(function()( var el = $(this).attr("href"); var elWrapped = $(el); scrollToDiv(elWrapped,40); return false; ) );

To wszystko - teraz mamy prosty strona z linkami, które po kliknięciu przewijają się do żądanej części strony.

Cześć przyjaciele. W tym artykule przeanalizujemy zdarzenie jQuery podczas przewijania strony do konkretnego elementu. Innymi słowy, więc. W tym przykładzie uruchomimy zdarzenie, gdy strona zostanie przewinięta do stopki. Następnie wyświetlimy małe wyskakujące okienko o gładkim wyglądzie. I zamkniemy go również na kliknięcie. Co w nim umieścić, zdecyduj sam, jest wiele opcji. Oto jak to wygląda:

Zacznijmy od znaczników HTML i nie ma tu nic niezwykłego. Wszystko jest dość proste i jasne. Duże płótno tekstu na dole stopki i blok z przyciskiem, który się pojawi. Oto kod blokowy:

1 2 3 4 5 6 7 8 9 10

<html > <ciało> Dużo treści tutaj...<div id="blok"> Jakiś tekst.<typ wejścia = "przycisk" klasa = "ale" wartość = "(!LANG:Zamknij" / > !} </div> <div id="stopka"> stopka</div> </ciało> </html>

Dużo treści tutaj...

Teraz udekorujmy nasz ukryty blok i jego przycisk:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#block ( display : none ; position : fixed ; top : 15px ; right : 15px ; color : #fff ; background : #4CAF50 ; padding : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px 20px -5px #3a3a3a ; font-family : Arial; text-align : center ; ) .btn( background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; cursor : pointer ; padding : 5px 10px ; margines górny : 10px ; grubość czcionki : pogrubienie ; )

#block( display: brak; pozycja: fixed; top: 15px; right: 15px; color: #fff; background: #4CAF50; padding: 10px; border-radius: 5px; width: 200px; box-shadow: 0 13px 20px -5px #3a3a3a; rodzina czcionek: Arial; text-align: center; ) .btn( background: #FF9800; border: 2px solid #795548; color: #fff; border-radius: 5px; kursor: wskaźnik; padding: 5px 10px; margines górny: 10px; grubość czcionki: pogrubienie; )

Teraz zajmijmy się bezpośrednio tym, co nazywa się przewijaniem do elementu. Nadal język angielski niezbędne dla dewelopera. Dołącz jQuery jako standard. Zrobię to przez CDN, bo będzie to najbardziej aktualna wersja.

<źródło skryptu= „//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”>

A potem sam kod skryptu, który stworzy magię na stronie:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready (function () ( var $element = $(".footer" ) ; let counter = 0 ; $(window) .scroll (function () ( var scroll = $(window) .scrollTop () + $(okno).wysokość () ; //Jeśli przewiń do końca elementu //var offset = $element.offset().top + $element.height(); //Jeśli przewiń do początku elementu var offset = $element.offset() .top if (scroll > offset && counter == 0) ( $("#block" ) .fadeIn (500) ; counter = 1 ; ) ) ); $(".btn" ) .click (funkcja () ( $("#blok" ) .slideUp () ; ) ); ) ;

$(document).ready(function()( var $element = $(".footer"); let counter = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop() + $(window).height(); //If przewiń do końca elementu //var offset = $element.offset().top + $element.height(); //If przewiń do początku element var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500); counter = 1; ) )); $(".btn ").click(funkcja()( $("#blok").slideUp(;)); ));

Domyślnie zdarzenie jest uruchamiane, gdy tylko pojawi się początek elementu, w tym przypadku stopka, ale możesz zmienić wartość odkomentowując linię 7, a wtedy funkcja uruchomi się, gdy scroll dotrze do końca elementu .

W tak skomplikowany sposób możesz pokazać odwiedzającym Twoją witrynę swoją unikalną ofertę, a dodając cele w metryce, śledzić jej konwersję.

Reg.ru: domeny i hosting

Największy rejestrator i dostawca hostingu w Rosji.

Ponad 2 miliony nazw domen w serwisie.

Promocja, poczta dla domeny, rozwiązania dla biznesu.

Już ponad 700 tysięcy klientów na całym świecie dokonało wyboru.

Bootstrap Framework: szybki responsywny układ

Kurs wideo krok po kroku na temat podstaw układ adaptacyjny w frameworku Bootstrap.

Naucz się składać w prosty, szybki i wydajny sposób, korzystając z potężnego i praktycznego narzędzia.

Uzupełnij zamówienie i zdobądź pieniądze.

*Najedź myszą, aby wstrzymać przewijanie.

Wstecz do przodu

Płynne przewijanie strony w górę za pomocą jQuery

W tym filmie przeanalizujemy taki moment jak stworzenie płynnego przewijania strony w górę po kliknięciu w link.

Często wygodnie jest użyć linku „Powrót do góry”, gdy jesteś bliżej dołu strony.

Możliwe jest zaimplementowanie tej funkcji wyłącznie za pomocą HTML i CSS, ale w tym filmie pokażę, jak możesz ulepszyć tę funkcję i uczynić ją wygodniejszą przy użyciu biblioteki jQuery.

JavaScript pozwoli nam zapewnić płynny ruch z dołu strony na górę, unikając „skoku”, który pojawia się przy użyciu zwykłej „kotwicy”.

Pojawiają się tylko wtedy, gdy strona zostanie przewinięta w dół o określoną liczbę pikseli, którą możesz samodzielnie ustawić.

Jest to również bardzo wygodne, ponieważ zwraca uwagę osoby na interaktywny element na stronie i zauważa, że ​​istnieje możliwość skorzystania z takiej funkcji.

Demonstracja skryptu i szczegółowa analiza Zobacz kod na poniższym filmie.

Krótki przegląd lekcji (szczegóły znajdziesz w filmie):

index.html

1. Pierwszy potrzebujemy pliku, który będzie zawierał sam link „Powrót do góry”. Niech będzie index.html.

Aby wszystko działało, w dziale głowa dokument, musimy dołączyć plik stylu i dwa pliki JavaScript (więcej o nich później):

Najpierw dołączamy bibliotekę jQuery, potem plik script.js z kodem, który sami piszemy.

Również w tym pliku musimy umieścić sam link, po kliknięciu płynnie uniesie się na górę strony:

Top

skrypt.js

2. Drugie to plik script.js, w którym zapisujemy funkcje realizujące główne akcje:

$(document).ready(function()( $(function()()($("#back-top").hide(); $(window).scroll(function ()( if ($(this).scrollTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); $("#back-top a" ).click(function ()( $("body,html").animate(( scrollTop:0 ), 800); return false; )); )); ));

Tak więc najpierw czekamy na pełne załadowanie dokumentu i ukrywamy nasz przycisk „Powrót do góry”, aby nie był początkowo widoczny na stronie.

Następnie przechwytujemy zdarzenie przewijania okna i jeśli przewijanie opadnie o 700 pikseli lub więcej, to płynnie wyświetlamy przycisk „W górę” za pomocą metody zanikać. W przeciwnym razie ukrywamy to metodą zanikanie.

W drugiej anonimowej funkcji śledzimy zdarzenie kliknięcia na link w bloku #powrót do góry i zastosuj metodę animować płynnie wznieść się na górę strony (scrollTop:0) w 800ms.

styl.css

3. I trzeci to plik stylu. W naszym przykładzie nie ma w tym nic zbędnego, więc stylów jest kilka:

Body ( font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; ) p ( margin-left: 150px; ) /* Przycisk górny */ #back-top( position:fixed; bottom:10px; left: 0px; ) #back-top a( szerokość:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text -decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; ) /* strzałka graficzna */ #back-top span( szerokość:55px; wysokość:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") bez powtarzania na dole na środku; -webkit-transition:1s; -moz-transition:1s; transition:1s ; ) #back-top a:hover span(background-color: rgba(0, 0, 0, 0.3);)

Z tego, o czym warto wspomnieć, można wymienić wartość naprawił na własność pozycja na bloku #powrót do góry. To pozwala nam ustalić pozycję przycisku w stosunku do okna przeglądarki.

Dziś znów poćwiczymy z jQuery. Napiszemy skrypt do płynnego przewijania po naciśnięciu przycisku. Zróbmy to tak, aby po kliknięciu przycisku, użytkownik został płynnie przeniesiony do żądany blok. Ten skrypt może być użyty do stworzenia pięknego menu zakotwiczenia.

Oto skrypt, którego będziemy potrzebować.

Skrypt składa się z funkcji, której jedynym parametrem jest zmienna z wartością id bloku, w którym chcesz wykonać płynne przejście.

Wewnątrz funkcji, w pierwszym wierszu, tworzona jest zmienna offset o wartości 0.

animuj - pozwala na wykonanie niestandardowej animacji na podstawie zmiany Właściwości CSS dla wybranych pozycji.

scrollTop — pobiera górną wartość dopełnienia przewijania dla pierwszego elementu w zestawie.

Gdzie 1000 oznacza czas trwania przejścia. Zmieniając ten czas, przyspieszasz lub zwalniasz przewijanie.

Jak to działa?

Napiszmy kod testowy, na którym wypróbujemy nasz skrypt w działaniu.

Poproś o telefon!

Tutaj zwykły HTML próbka.

Aby skrypt działał, musisz dołączyć bibliotekę jquery.

Również dla jasności zrobiłem wcięcie pomiędzy testowanymi elementami, aby pokazać zwój. Nie zawracałem sobie głowy tworzeniem osobnego pliku dla stylów i napisałem wszystko wewnątrz tagu head.

Poproś o telefon!

W atrybucie href wskazujemy blok, do którego musimy dokonać przejścia, jest to zalecane w przypadku, gdy płynne przewijanie nie działa, aby użytkownik został dokładnie przeniesiony do wybranego bloku. W zdarzeniu onclick podajemy nazwę funkcji oraz jako parametr podajemy id bloku, do którego chcemy wykonać płynne przejście.