Προς το περιεχόμενο

HTML: Slide To Top

evoracing

Από τον evoracing
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

evoracing Crazy Insomniac

evoracing

Δημοσ.
Δημοσ.

Καλησπέρα... Βρήκα αυτό το HTML για Move Top από ένα site (Google Chrome:(Move Top) δεξί κλικ/επιθεώρηση στοιχειού/copy HTML... :-) ...) και το έβαλα στο site μου που ακόμα φτιάχνω αλλά είναι ένα ξέρω Move Top με απλά γράμματα και τα πατάς και πάει κατευθείαν πάνω... Εγώ θέλω ένα στιλ σαν

και αυτά:

 

cbttlabp-20.jpg

 

cbttlabp-19.jpg

 

 

 

 

 

και να πηγαίνει ''συρταρωτό'' πάνω...Αν είναι εύκολο σε κάποιων να μου φταίξει η να μου εξηγήσει καλά πως να κάνω γιατί είμαι ΠΟΛΥ αρχάριος σε αυτά τα θέματα

 

Το Site μου το φτιάχνω με το Weebly

evoracing Crazy Insomniac

evoracing

Δημοσ.
  • Μέλος
Δημοσ.

Εντολή έχω βρει αλλά οπός είπα με μεταφέρει χωρίς κανένα εφέ πάνω εγώ θέλω να πηγαίνει συρταρωτά...στο Weebly δεν έχεις και πολλές δυνατότητες αλλά σου επιτρέπει να προσθέσεις HTML

x_maras Proficient

x_maras

Δημοσ.
Δημοσ.

Εντολή έχω βρει αλλά οπός είπα με μεταφέρει χωρίς κανένα εφέ πάνω εγώ θέλω να πηγαίνει συρταρωτά...στο Weebly δεν έχεις και πολλές δυνατότητες αλλά σου επιτρέπει να προσθέσεις HTML

 

Αυτό που σου έγραψε ο weber προσθέτει το "εφέ" δες πχ. το demo από το νούμερο 5

Uberalles_gr Grand Master

Uberalles_gr

Δημοσ.
Δημοσ.

Ναι αλλά πως το προσθέτω???

 

Η εντολή είναι αυτή

 

<a href="#" title="Back To Top" class="bullet">Back To Top</a>

 

>
function func_go_top()
{
 $('html, body').animate({scrollTop:0}, 'slow');
}

<a href="javascript:void(0)" title="Back To Top" class="bullet" onclick="func_go_top()">Back To Top</a>

 

με την προυπόθεση ότι έχεις προσθέσεις την βιβλιοθήκη jQuery

x_maras Proficient

x_maras

Δημοσ.
Δημοσ.

Κατέβασε το αρχείο από τη σελίδα, καν' το unzip και θα βρεις κάποια τα αρχεία που χρειάζεσαι όπως και κάποιο παράδειγμα για το πως να το χρησιμοποιήσεις.

kalogeros Mentor

kalogeros

Δημοσ.
Δημοσ.

Επειδή είμαι αρχάριος μπορείτε να μου πείτε τι πρέπει ακριβώς να κάνω??

Στο head του αρχείου σου βάλε το παρακάτω

>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script language="javascript">
function goToAnchor(){
$('html,body').animate({scrollTop: $("#top").offset().top},'slow');
}
</script>

 

Μέσα στο body βάλε

>
<a name="top"></a>

 

Τέλος, στο link σου βάλε

 

>
<a href="javascrip:;" onclick="goToAnchor()">Go to top</a>

evoracing Crazy Insomniac

evoracing

Δημοσ.
  • Μέλος
Δημοσ.

Ναι...Οπως ειπα και πιο πανω ειμαι ΑΡΧΑΡΙΟΣ...(που συμενει οτι δεν εχω ιδεα απο head,body,link).

 

post-175011-0-10600200-1334676997_thumb.jpg

 

 

Στο πλαίσιο αυτό γράφω την εντολή

kalogeros Mentor

kalogeros

Δημοσ.
Δημοσ.

Ναι...Οπως ειπα και πιο πανω ειμαι ΑΡΧΑΡΙΟΣ...(που συμενει οτι δεν εχω ιδεα απο head,body,link).

 

post-175011-0-10600200-1334676997_thumb.jpg

 

 

Στο πλαίσιο αυτό γράφω την εντολή

Φίλε μου χωρίς να θέλω να σε προσβάλω, δεν ξέρεις τι είναι τα head, body και link και θέλεις να βάλεις animation στη σελίδα σου; Μάλλον έχεις ξεκινήσεις λίγο ανάποδα.

 

Τέσπα, το πρόγραμμα το οποίο φαίνεται στην εικόνα σου δεν ξέρω τι είναι, δεν ξέρω πώς δουλεύει και κατά συνέπεια δεν μπορώ να βοηθήσω παραπάνω. Ελπίζω να καταφέρεις να βρεις λύση σύντομα.

 

Πάντα φιλικά.

evoracing Crazy Insomniac

evoracing

Δημοσ.
  • Μέλος
Δημοσ.

Λοιπόν...Δεν έχω ιδέα από την γλώσσα του προγραμματισμού (αν και θα ήθελα πολύ), το site που φτιάχνουν είναι το πρώτο που φτιάχνω και το Weebly με βοηθάει πολυ να πλησίασω σε αυτό που θέλω να κάνω (και όπως καταλάβατε το Weebly δεν είναι πρόγραμμα είναι απο αυτά τα site που φτειαχνεις δικιά σου free ιστοσελίδα και απλά πρόσθετεις τα "αντικήμενα" που θέλεις, photo gallery, Custom HTML, Video)...Τώρα(θα το ξανάπω ποιο αναλυτικά) έχω μια εντολή για Move Top εγώ απλά θέλω σε αυτή την εντολή να προσθέσω ένα εφέ που απλα να πήγε νέο γλυκά κα αργά επάνω(όπως τα demo που μου στείλατε) άμα ακόμα δεν καταλάβατε πως λειτουργεί το Weebly απλά πηγαίνετε στο http://www.weebly.com/ και δοκιμάστε το...Και το τονίζω ΜΟΝΟ Custom HTML μπορώ να κάνω στο Weebly...(συγνώμη άμα έχω κάνει ορθογραφικά λάθη αλλά γράφω απο το iPod)

 

Sent from my iPod touch using Insomnia

x_maras Proficient

x_maras

Δημοσ.
Δημοσ.

Έφτιαξα ένα λογαριασμό και του έριξα μια ματιά.

Για να πειράξεις το <head> κάνεις το εξής.

  • Πηγαίνεις στο themes και επιλέγεις το δικό σου
  • πατάς δεξιά εκεί που λέει edit html/css
  • Στα αριστερά πατάς το index.html
  • Εκεί θα βρεις το head, προσθέτεις ότι σου είπαν οι παραπάνω

evoracing Crazy Insomniac

evoracing

Δημοσ.
  • Μέλος
Δημοσ.

Ωραία επειδή δεν ξέρω που να τα γράψω μπορείς να τα κάνεις εσύ

 

στο index.html γραφεί αυτά

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<title>{title}</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body class="wsite-theme-dark">

<div id="wrapper">

<div class="title">{logo max-height="86"}</div>

 

<div id="navigation">

{menu}

</div>

 

<div id="container">

<div id="content">

<div id="header"><div class="wsite-header"></div></div>

<div class="text">

{content}

</div>

</div>

</div>

<div id="footer">{footer}</div>

<div class="clear"></div>

</div>

 

</body>

</html>

 

 

x_maras Proficient

x_maras

Δημοσ.
Δημοσ.

ο κώδικας του kalogeros mixed with Uberalles_gr :mrgreen:

 

>
<head>
...
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script language="javascript">
function goToAnchor(){
       $('html,body').animate({scrollTop: $("#top").offset().top},'slow');
}
</script>
...
</head>
<body>
<a name="top"></a>
...
<a href="javascrip: void(0)" onclick="goToAnchor();">Go to top</a> <-- αυτο είναι το λινκ σου. Μην κάνεις copy το βελάκι "<--" και το κείμενο μετά από αυτό
...
</body>

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...