Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przyciski nawigacyjne strony
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
DiamondPir
witam chciałbym stworzyć przyciski nawigacyjne dla mojej strony
-przesunięcie na samą górę strony
-przesunięcie na sam dół strony
-przyciski miały by się pokazywać dopiero po ruszeniu strony scrollem
-wszystko przypięte do lewej krawędzi strony
-i aby ładnie płynnie się to przesuwało

tylko kompletnie nie wiem jak się za to zabrać;/ jest gdzieś może jakiś przykład tego czy tutorial?
a może jakiś gotowiec też się znajdzie:)? nie napotkaliście się gdzieś na coś takiego?

proszę o pomoc
Crozin
To nie ma nic wspólnego z JS, a tym bardziej z AJAXem. No może podpunkt z pojawianiem się dopiero przy poruszeniu suwaka strony.

1. CSS: fixed position
2. Podstawy HTMLa: Element A
DiamondPir
a nie znajdzie się cos w j. polskim?

znalazłem coś takeigo:
http://.../jquery/scrollTo/
i to:
http://.../jquery/localScroll/

ale i tak nie mogę sobie poradzić z umieszczeniem tego na stronie... pomoże ktoś?


Cytat(Crozin @ 18.09.2010, 01:42:59 ) *
To nie ma nic wspólnego z JS, a tym bardziej z AJAXem. No może podpunkt z pojawianiem się dopiero przy poruszeniu suwaka strony.

1. CSS: fixed position
2. Podstawy HTMLa: Element A


tak przeglądam te artykuły i się gubię...;/
np to: http://|||.com/2007/10/jqueryscrollto.html
który js pobrać i jak to połączyć ze strona? proszę o pomoc
devnul
gdzieś na samej górze definiujesz sobie element z jakimś ID np top
  1. <div id="top">
analogicznie na dole z powiedzmy ID foot
definiujesz sobie dwa linki i pozycjonujesz je odpowiednio
  1. <a href="#top" style="position:fixed;bottom:0;left:0">do góry</a><a href="#foot" style="position:fixed;top:0;left:0">na dół</a>

do tego możesz dynamicznie ukrywać i pokazywać przez javascript oba linki jeśli strona jest na samej górze to nie ma co pokazywać strzałki powrotu na górę analogicznie jeśli strona jest na samym dole to nie ma co pokazywać strzałki powrotu na dół ale to już myślę sobie poradzisz

btw bez angielskiego to ani rusz w tym fachu więc sugeruję zakup słownika i porządne studiowanie go w wolnym czasie
DiamondPir
ale jak podpiąć do tego javie żeby strona płynnie przesuwała się?
wybaczcie za moją amatorszczyznę ale w tych tematach się nie orientuje;/
devnul
przykład z wykorzystaniem jquery
  1. <a class="slide" href="#top" style="position:fixed;bottom:0;left:0">do góry</a><a class="slide" href="#foot" style="position:fixed;top:0;left:0">na dół</a>

[JAVASCRIPT] pobierz, plaintext
  1. $('a.slide[href*=#]').click(function() {
  2. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  3. var $target = $(this.hash);
  4. $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
  5. this.blur();
  6. if ($target.length) {
  7. var targetOffset = $target.offset().top;
  8. $('html,body').animate({scrollTop: targetOffset}, 'normal');
  9. }
  10. return false;
  11. }
  12. });
[JAVASCRIPT] pobierz, plaintext
DiamondPir
ok... więc tak...:
stworzyłem plik js o nazwie gora z tym kodem:
  1. $('a.slide[href*=#]').click(function() {
  2. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  3. var $target = $(this.hash);
  4. $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
  5. this.blur();
  6. if ($target.length) {
  7. var targetOffset = $target.offset().top;
  8. $('html,body').animate({scrollTop: targetOffset}, 'normal');
  9. }
  10. return false;
  11. }
  12. });


wstawiłem w head kod:
  1. <script type="text/javascript" src="{THEME}/js/gora.js"></script>


ten kod wstawiłem na początku body:
  1. <a class="slide" href="#top" style="position:fixed;bottom:0;left:0">do góry</a><a class="slide" href="#foot" style="position:fixed;top:0;left:0">na dół</a>



i nadal nie działa;/ dobrze chociaż to robię?
działa tylko przycisk w górę ale i tak płynnie się nie przesuwa...
proszę o odpowiedź z dokładną instrukcją jak to zrobić
devnul
Cytat
przykład z wykorzystaniem jquery

DiamondPir
no wybacz ale i tak nie wiem jak to zrobić...
nie można jakoś prościej...?
devnul
można, zapraszam tutaj
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.