Forum Blogowe 19 lat!

Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  »  ::
Autor Wiadomość
magwilk 
Blogger.Klub

Dołączyła: 21 Kwi 2015
Posty: 1
  Wysłany:    [blogger] Płynne przewijanie do określonego fragmentu strony
Jak można zrobić płynne przewijanie do określonego fragmentu strony ? :help:

Chodzi mi o coś takiego jak np.: allaboutdesign.nl/#drukwerk

Niestety wykorzystując do tego SAME kotwice - wygląda to tragicznie :kwasny: ponieważ zawartość strony jedynie "przeskakuje" do danego miejsca. Można to w jakiś fajny sposób urozmaicić ? :hyhy:
 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739
Wysłany: 2015-07-24, 12:15   animowane przeskakiwanie odsyłaczy do wyznaczonego miejsca
OK. Jako że z powyższą instrukcją jest masa problemów i ich naprawianie jest dużo bardziej czasochłonne, niż się spodziewałem, postanowiłem napisać to rozwiązanie od nowa - tylko tym razem w sposób, w jaki to powinno być zrobione.

Na początek usuwamy wszystkie pozostałości po poprzedniej instrukcji.

I teraz kilka prostych kroków:

1. Przygotowujemy link z kotwicą w środku, np. w treści postu albo w gadżecie, o tak:

Kod

<a href="#docelowy_id">link</a>


2. Dodajemy na stronie kotwicę, do której ma przeskakiwać strona - jej nazwa musi się zgadzać z tym, co wpisaliśmy w linku, na przykład tak:

Kod

<p id="docelowy_id">Tutaj strona ma przeskoczyć</p>


3. Podpinamy jQuery, jeżeli nie ma go jeszcze w szablonie. Jeżeli już jest, to ten punkt można pominąć.

Poniższą linijkę:

Kod

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


wklejamy wewnątrz szablonu (Szablon -> Edytuj HTML).

Można tę linijkę wkleić również do nowego gadżetu HTML/JavaScript.

4. Doklejamy skrypt. Musi się on znaleźć _po_ wywołaniu jQuery - niekoniecznie bezpośrednio, ale dla własnej wygody najlepiej zrobić to analogicznie do punktu 3. Czyli albo bezpośrednio w szablonie, albo w poprzednio utworzonym gadżecie. A skrypt jest następujący:

Kod


<script type="text/javascript">

function jumpToLocation(idToJump) {
$("html, body").animate({ scrollTop: $(idToJump).offset().top }, 1000);
};

$(function() {
// płynne przejście przy załadowaniu strony

var jumpBlogowicz = window.location.hash;

if(jumpBlogowicz) {
jumpToLocation(jumpBlogowicz);
}

// obsługa linków z kotwicami

$("a[href^='#']").click(function() {
var anchor = $(this).attr("href");
jumpToLocation(anchor);

});
});
</script>


4. Gotowe.

Powyższy kod robi dwie rzeczy. Zapewnia płynny przejazd strony do wybranej kotwicy po kliknięciu na link. Oprócz tego dołożyłem coś jeszcze, czego w poprzedniej instrukcji zabrakło: jeśli podlinkujecie jakąś zewnętrzną stronę Waszego bloga (np. inny post albo podstronę) i dodacie w adresie istniejącą tam kotwicę
np.

Kod

http://waszblog.blogspot.com/jakis-wasz-wpis/#kotwica
, to płynne przejście zadziała również po załadowaniu tej nowej strony.

Poproszę o info, czy zadziałało. :)
 
  podziel si� tym postem na:
magwilk 
Blogger.Klub

Dołączyła: 21 Kwi 2015
Posty: 1
Wysłany: 2015-07-24, 19:38   kotwice na blogspocie
Wszystko byłoby ok - działa ALE ;)

Działa tylko i wyłącznie jeżeli przykładowo <a href="#docelowy_id">link</a> umieścimy w treści jednego z gadżetów, a <p id="docelowy_id">Tutaj strona ma przeskoczyć</p> w 2 gadżecie i jest naprawdę super.

Ale jeżeli chcemy umieścić <a href="#docelowy_id">link</a> w gadżecie STRONY aby linki odnosiły do danego miejsca to już nie działa ;)

Natomiast jeżeli w gadżecie STRONY umieścimy link zewnętrzny

Kod

http://twojprzykladowy.blogspot.com/#nasza_kwatera
, wówczas odnosi nas do <p id="nasza_kwatera">Tutaj strona ma przeskoczyć</p> ale nie robi tego w sposób płynny tylko przeskakuje :)
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 40
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2015-07-24, 22:23   Tworzenie odsyłacza z płynnym przewijaniem do nagłówka

Lukem napisał/a:

Poproszę o info, czy zadziałało. :)
Skrypt działa dobrze, ale nie w przypadku blogspota o czym wspomniała już magwilk.

Tłumaczyłem ostatnio => Jak tworzyć odsyłacze na stronach blogspota i przez to, że trzeba podawać pełne adresy URL, powyższe rozwiązanie nie łapie tych kotwic.

Znalazłem inne, które zadziałało bez problemu:
Wiadomość (widoczna dla zarejestrowanych)
Również opiera się o jQuery.

Jak sprawdzić czy biblioteka jQuery jest już gdzieś załączona na blogu?
1. Otwórz swojego bloga w nowej karcie przeglądarki
2. kliknij w pustym miejscu strony prawym klawiszem myszy
3. z menu wybierz "pokaż źródło strony" (lub coś podobnego do tego)
4. otworzy się okno lub nowa karta - tam wciśnij kombinację ctrl+f (lub wybierz wyszukiwanie z górnego menu)
5. wpisz jquery i sprawdź czy gdzieś w źródle jest już odnośnik do biblioteki
6. jak nie ma żadnego, to wystarczy dopisać przed skryptem to co Lukem podał w punkcie trzecim swojej instrukcji.

Skrypt wklejamy do gadżetu HTML/JavaScript. Jeżeli ma być dodany w źródle szablonu, to prawdopodobnie & będzie trzeba zapisać jako &amp;

źródło skryptu:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Lukem 
Blogowicz.Friend

Pomógł: 89 razy
Dołączył/a: 01 Kwi 2006
Posty: 1739
Wysłany: 2015-07-26, 12:18   Re: odsyłacze

Htsz napisał/a:

Skrypt działa dobrze, ale nie w przypadku blogspota o czym wspomniała już magwilk.

Tłumaczyłem ostatnio Jak tworzyć odsyłacze na stronach blogspota i przez to, że trzeba podawać pełne adresy URL, powyższe rozwiązanie nie łapie tych kotwic.


Racja, moje niedopatrzenie. Jakimś obejściem problemu jest dodawanie kotwic w widoku HTML zamiast w edytorze (wtedy Blogspot niczego nie dopisuje), ale wygoda takiego rozwiązania jest dyskusyjna. :|
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 40
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2015-08-06, 15:45   

Lukem napisał/a:

Jakimś obejściem problemu jest dodawanie kotwic w widoku HTML zamiast w edytorze (wtedy Blogspot niczego nie dopisuje), ale wygoda takiego rozwiązania jest dyskusyjna. :|
Dlatego poszukałem takiego, które nie wymaga kombinowania ;)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
HitFan 
Blogger.Klub


Imię: Damian
Pomógł: 6 razy
Wiek: 29
Dołączył/a: 26 Lut 2016
Posty: 61
Miasto: Bytom
Wysłany: 2017-02-18, 01:07   
Spróbowałem dodać powyższy kod (ten wrzucony przez HTSZ jako ostatni) w edytorze HTML szablonu. Zaraz pod wywołaniem jQuery, ale niestety gdy tylko go dodam, znika mi całe menu główne - zostaje sam pasek, bez rozwijanego menu.
Ma ktoś pomysł, co może być nie tak?
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 40
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2017-02-18, 10:47   
Niektóre skrypty mogą ze sobą kolidować, chociaż ten nie powinien, bo jest wykonywany po spełnieniu określonego warunku. Spróbuj umieścić go na dole, przed </body>.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
HitFan 
Blogger.Klub


Imię: Damian
Pomógł: 6 razy
Wiek: 29
Dołączył/a: 26 Lut 2016
Posty: 61
Miasto: Bytom
Wysłany: 2017-02-18, 13:11   
Niestety po wrzuceniu przed </body> w ogóle się nie wykonywał, natomiast po wrzuceniu gdzieś w środku efekt jest ten sam - znika menu główne. Niestety.
Może gryzie się to z przyciskiem wróć do góry? On właśnie płynnie skroluje, może idzie jakoś jego kod zmodyfikować?
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 40
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2017-02-18, 13:51   
To już niestety wymaga głębszych testów na żywo (czyli z wklejonym kodem, który zostanie przeanalizowany w firebugu / konsoli) i poświęcenia większej ilości czasu.

Możesz na własną rękę, metodą prób i błędów kasować elementy szablonu, i sprawdzać czy bez nich ten skrypt działa poprawnie.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 40
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2025-05-30, 17:50   
// aktualizacja//

Prosty efekt płynnego przewijania można obecnie uzyskać za pomocą CSS:

Kod

scroll-behavior: smooth;


dla całego dokumentu:

Kod

html {
scroll-behavior: smooth;
}


lub dla wskazanego elementu:

Kod

.klasa {
scroll-behavior: smooth;
}

ewentualnie

#identyfikator {
scroll-behavior: smooth;
}
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
Wyświetl posty z ostatnich:   
»  »  »  »  ::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegły.
Nie możesz odpowiadać w tematach. Zobacz szczegły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
 Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2025 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz