go top and bottom

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

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

Απάντηση
Άβαταρ μέλους
Helios
Δημοσιεύσεις: 45
Εγγραφή: 10 Οκτ 2009 16:45
Τοποθεσία: Αθηνα
Επικοινωνία:

go top and bottom

Δημοσίευση από Helios » 12 Δεκ 2009 15:46

Τοποθετώντας έναν απλό JavaScript κώδικα, μπορούμε να κάνουμε αυτόματα με ένα πάτημα του ποντικιού στο τέρμα η την κορυφή κάθε σελίδας σε χρόνο μηδέν.

Βημα 1ο

CSS κώδικας: Κάντε Copy και paste τον παρακάτω κώδικα, ανάμεσα στα <head> και </head>. Η καλύτερη θέση θα ήταν αμέσως πρίν το ]]></b:skin> ή σε άλλα πρότυπα γνωστό σαν </b:skin>

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

.gototop&#123;
background&#58;url&#40;http&#58;//i31.tinypic.com/2vtqqt3.png&#41;no-repeat;
display&#58;block;_display&#58;none;
position&#58;fixed;
z-index&#58;9999;
text-indent&#58;-9999px;
width&#58;17px;
height&#58;17px;
overflow&#58;hidden;
outline&#58;none;
left&#58;3px; bottom&#58;30px;&#125;

.gotobottom &#123;
background&#58;url&#40;http&#58;//i32.tinypic.com/16lle91.png&#41;no-repeat;
width&#58;17px;
height&#58;17px;
display&#58;block;
_display&#58;none;
position&#58;fixed; z-index&#58;9999;
text-indent&#58;-9999px;
overflow&#58;hidden;
outline&#58;none;
left&#58;3px; bottom&#58;5px;
&#125;
Βημα 2ο

HTML κώδικας: Κάντε Copy και paste τον παρακάτω κώδικα, πάνω απο το </body>

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

<a href='#' style='display&#58;scroll;position&#58;fixed;bottom&#58;115px;right&#58;5px;' title='Back to Top'><img src='http&#58;//i31.tinypic.com/2vtqqt3.png' style='border&#58;0;'/></a>

<br/>

<a href='#GoDown' style='display&#58;scroll;position&#58;fixed;bottom&#58;80px;right&#58;5px;'><img src='http&#58;//i32.tinypic.com/16lle91.png' style='border&#58;0;'/></a>
<a name='GoDown'/>
Πώς να κάνετε κάποιες μετατροπές στον CSS και στον HTML κώδικα:

1)
Αλάξτε το background image link με το link κάποιας δικής σας δική σας εικόνας:

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

background&#58;url&#40;http&#58;//i31.tinypic.com/2vtqqt3.png&#41;no-repeat;

background&#58;url&#40;http&#58;//i32.tinypic.com/16lle91.png&#41;no-repeat;
2)Για να αλαξετε το "position" των Buttons, αλάξτε τις μεταβλητές απο τα δύο

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

right&#58;5px;
Για παράδειγμα, αν θέλετε να εμφανίζονται τα buttons αριστερά, αντικαταστήστε τα:

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

right&#58;5px;
σε:

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

left&#58;5px;
Εικόνα

Απάντηση

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

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

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