Forum PHP.pl > [CSS][HTML]Nawigacja - przewijanie strony głównej

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]Nawigacja - przewijanie strony głównej

kosmos

6.03.2015, 10:27:19

Witam,
Pozwolę sobie przytoczyć tą stronę, tylko i wyłącznie po to, aby zobrazować moje pytanie. Jeśli to zabronione, proszę o edytowanie postu, usunięcie linka i nazwanie tego po imieniu

Jak nazywa się taki sposób nawigowania na stronie? Wywołanie danej akcji menu, powoduje przesuwanie głównego ekranu strony w górę lub w dół? Jak najprościej wykonać taką nawigację? Nie proszę o gotowe rozwiązania tylko podpowiedzi, materiały. Wiedziałbym gdzie szukać gdybym potrafil to nazwać

Dzięki wielkie, pozdrawiam
N

kafowi

6.03.2015, 11:28:55

To są kotwice, a efekt przedstawiony na stronie to kotwica z płynnym przejściem.
Możesz to wykonać za pomocą jakiejś biblioteki np. jQuery.scrollTo

robertpiaty

6.03.2015, 19:12:20

Można też to zrobić za pomocą samego jQuery

[HTML] pobierz, plaintext 
$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);
[HTML] pobierz, plaintext

Gdzie #title1 to jest id elementu do którego chcesz przewinąć.

kosmos

16.03.2015, 11:33:23

Kontynuując wątek.
Znalazłem w sieci taki oto kawałek kodu:

[PHP] pobierz, plaintext 
$('#content').hide().stop(true, true).slideDown(1000);
 
$('#next, #prev').on('click', function(event){
    event.preventDefault();
    var adres = $(this).prop('href');
    $('#content').stop(true, true).slideUp(1000, function(){
        window.location.href(adres);
    });
});
[PHP] pobierz, plaintext

Czy ktoś mógłby mi go wytłumaczyć? Mając np:

[HTML] pobierz, plaintext 
<div id="punkt_A"></div>
<div id="punkt_B"></div>
[HTML] pobierz, plaintext

Chcę aby po kliknięciu na button znajdujący się w divie -> punkt_ A, strona przesunęła się w dół do diva -> punkt_B (czyli mamy stronę główną z odnosnikiem np formularz i po kliknięciu strona przesuwa się w dół do tego formularza który jest w divie punktB. Reasumując chodzi o identyczny efekt przejścia jak na stronie w linku który przytoczyłem w pierwszym poście.

Jak nalezy zmodyfikowac powyższy kod aby to zadziałało? W jQuery jestem zielony

- póki co.

kujol

16.03.2015, 14:55:06

Normalnie to się robi tak, że do linku doklejasz: "#id_elementu_do_ktorego_ma_nas_przeniesc"
Wiecej Ci nie powiem, bo z js jestem cienki

kosmos

18.03.2015, 20:18:18

Próbuję nauczyć się podstaw aby to zrozumieć ale pewnie coś robię źle z pewnego przykładu:

w css mam:

[PHP] pobierz, plaintext 
#pierwszy {
 
    background: none repeat scroll 0 0 #d0e8ff;
    border: 2px solid #0569af;
    color: #0569af;
    font: bold 12px/100px Tahoma;
    height: 100px;
    text-align: center;
    width: 100px;
}
[PHP] pobierz, plaintext

w pliku base.php mam

[PHP] pobierz, plaintext 
<html>
   <head>  
   </head>
<body>
   <div id="pierwszy" style="color: red; display: block;">Kliknij mnie</div>
<script> $('#pierwszy').css('color','red').hide('slow').show(3000);  </script> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>!window.jQuery && document.write('<script src="jquery.min.js"><\/script>')</script>         
</body>
</html>
[PHP] pobierz, plaintext

Poprawnie próbuje użyć tego skrytpu?

Chodzi o efekt taki jak na tej stronce http://kursjs.pl/kurs/jquery/jquery.html tam gdzie jest przykład z "kliknij mnie"

Hej ... pomoże ktoś ?

update 18-03-2015

witam ponownie.
w dalszym ciągu próbuję uzyskać płynne przejście o jeden ekran w dół po wciśnięciu przycisku.
Znalazłem w sieci takie coś:

[HTML] pobierz, plaintext 
 $(jQuery.browser.webkit ? "body": "html").animate({
    scrollTop: '100px','fast', function(){
        // Code to be fired when complete goes here
    }
});
[HTML] pobierz, plaintext

Źródło: http://harmssite.com/2013/08/jquery-animat...r-all-browsers/

Mógłby mi ktoś wytłumaczyć jak mógłbym użyć to u siebie? oraz jak to działa?

trueblue

18.03.2015, 20:40:32

http://jsfiddle.net/jL94mxvt/

kosmos

18.03.2015, 20:47:00

o dzięki!
a w którym miejscu mogę ustawiać szybkość przewijania?

trueblue

18.03.2015, 20:52:20

http://jsfiddle.net/jL94mxvt/1/
1000 = 1s (1000ms)
Jest tam jakiś błąd, każde przewinięcie jest mniejsze o 2px, ale na razie nie wnikam. Być może po przerzucenie poza jsFiddle będzie ok.

kosmos

18.03.2015, 20:58:36

W jsFiddle działa elegancko, ale ja to muszę przełożyć na Symfony2 ;/ a tam niestety w taki sposób działac nie chce.

[PHP] pobierz, plaintext 
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Reply-to" content="test@gmail.pl" />
    <meta name="Author" content="" />
    <meta name="Description" content="Tu wpisz opis zawartości strony" />
    <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
    <title><?php echo 'Welcome!';?></title>
    <link href="<?php echo $view['assets']->getUrl('css/style5.css') ?>" rel="stylesheet" type="text/css" />
 
    <!-- dodanie jQuery do dokumentu -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Nasz kod java script: -->
 
    <script type="text/javascript">
$(document).ready(function () {
    var ua=navigator.userAgent.toLowerCase();
    var webkit=navigator.userAgent.indexOf('AppleWebKit')!=-1;
    $('#link').click(function (e) {
        e.preventDefault();
        $(webkit?"body":"html").animate({
            scrollTop: "+="+$(document.body).height()+'px'
        },1000);
    });
});
 
</script>
</head>
 
 
 
<body>
<a href="#" id="link">przewiń</a>
 
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
</html>
[PHP] pobierz, plaintext

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.