javascript scroll up and scroll down

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

javascript scroll up and scroll down

Δημοσίευση από quit » 19 Μάιος 2014 22:58

Καλησπέρα παιδια,
μήπως μπορείτε να με βοηθήσετε λίγο?

έχω κάποια div τον ενα μετα το άλλο.
Αυτό που θέλω να κάνω είναι να τσεκάρω πιο div ειναι στο top της σελιδας και να έχω βελακια πάνω κάτω με τα οποια να μπορώ να πηγαίνω στο επόμενο div και στο προηγούμενο.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

javascript scroll up and scroll down

Δημοσίευση από alou » 20 Μάιος 2014 01:40

html?

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

javascript scroll up and scroll down

Δημοσίευση από quit » 20 Μάιος 2014 13:38

allou καλησπερα θες να σου αναρτησω το html κωδικα?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

javascript scroll up and scroll down

Δημοσίευση από alou » 20 Μάιος 2014 13:51

Ναι και τι ακριβώς εννοείς ότι θες να τσεκάρεις ποιο div είναι στο top της σελίδας, πάντα το ίδιο θα είναι, εκτός αν εννοείς ποιό βλέπεις εκείνη την ώρα? που είναι λίγο πολύπλοκο.

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

javascript scroll up and scroll down

Δημοσίευση από quit » 21 Μάιος 2014 11:30

Λοιπόν αυτό που θέλω:
<a href="#" class="up" >arrow up</a> | <a href="#" class="down">arrow down</a>
<div class="first" style="width:100%; height:1000px;">content1</div>
<div class="second" style="width:100%; height:1000px;">content2</div>
<div class="third" style="width:100%; height:1000px;">content1</div>
.
.
.
<div class="fifty" style="width:100%; height:1000px;">content50</div>


Οπως και στο παράδειγμα με τα link πιο πανω(arrow up, arrow down) θέλω να μετακινουμαι στο επομενο και στο προηγουμενο div

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

javascript scroll up and scroll down

Δημοσίευση από alou » 21 Μάιος 2014 15:04

Με την html κάπως έτσι:

Κώδικας: Επιλογή όλων

<div class="sectionnav">
    <a href="-1" class="up" >arrow up</a> | <a href="1" class="down">arrow down</a>
</div>
<div id="first" class="sections">content1</div>
<div id="second" class="sections">content2</div>
<div id="third" class="sections">content3</div>
<div id="fifth" class="sections">content4</div>
<div class="sections">content5</div> 
<div class="sections">content6</div> 
Είναι λίγο πολύπλοκο γιατί πρέπει να κρατάς index για το που είσαι, αφού δεν υπάρχει άλλο σημείο αναφοράς

Κώδικας: Επιλογή όλων

var current = 0, next = 0;
var $sections = $&#40;'.sections'&#41;;
var counter = $sections.length;
$&#40;'.sectionnav a'&#41;.on&#40;'click', function&#40;e&#41;&#123;
    e.preventDefault&#40;&#41;;
    var where = parseInt&#40;$&#40;this&#41;.attr&#40;'href'&#41;&#41;;
    next = current + where;
    if &#40;next < counter && next >= 0&#41;&#123;
        $&#40;'body, html'&#41;.animate&#40;&#123;scrollTop&#58; $sections.eq&#40;next&#41;.offset&#40;&#41;.top + 'px'&#125;,500&#41;;
        current += where;
    &#125;
&#125;&#41;;
http://jsfiddle.net/eLpfz/

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

javascript scroll up and scroll down

Δημοσίευση από quit » 21 Μάιος 2014 15:58

allou σε ευχαριστω πολυ.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες