*gelöst* Smoothscroll in Template integrieren

justy

Offline

Posts: 44

« on: November 30, 2008, 11:06:35 AM »

Hallo,

ich würde in meinem Template gerne eine "Back to Top"-Funktion(für lange Seiten)mit Smoothscroll-Effekt(wie auf der http://www.bakery-shop.ch)integrieren.

Die Position der "Back to Top"-Funktion sollte rechts unten ausserhalb des Content-Bereichs, wie auf der http://www.bakery-shop.ch -Seite, sein.

Weiß hier jemand Rat wie man das im Template integrieren kann bzw. hat hier jemand Erfahrung bzgl. der Positionierung etc. im Template?

Wie muß der Code in der index.php bzw. das CSS des Templates aussehen damit der Smoothscroll-Effekt bzw. "Back to Top" funktioniert?

Für Ratschläge/Tipps wäre ich sehr dankbar.

Mit freundlichem Gruß

Justy


« Last Edit: December 01, 2008, 11:00:11 AM by justy »	Logged

KLIPP & KoRN GbR - neue und gebrauchte Nutzfahrzeuge -Fahrzeugsicherstellung - 2x in Deutschland(Ziesar und Mühlacker)
http://www.klipp-korn.com

doc

Guest

Re: Smoothscroll in Template integrieren

« Reply #1 on: November 30, 2008, 12:28:34 PM »

Hallo,

dazu muss in der index.php Deines Templates ein Anker am Anfang (z.B. direkt nach dem <body> Tag) gesetzt werden. Dann noch einen Verweis (Link) auf diesen Anker da wo Du ihn haben möchtest. Den Verweis kann man z.B. mit CSS absolut oder relative zu was auch immer positionieren.

Infos über interne Verweise findest Du u.a. auf SELFHTML: http://de.selfhtml.org/html/verweise/projektintern.htm#anker

Gruss Christian


	Logged

maverik

Offline

Posts: 1568

Re: Smoothscroll in Template integrieren

« Reply #2 on: November 30, 2008, 04:24:42 PM »

moin

anker

Code:

link

Code:

das ganze kannste dann in ein div packen und per css positionieren

script

http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/

gugg http://www.see-canada.de/

viel spass beim basteln

so long


« Last Edit: November 30, 2008, 04:26:23 PM by maverik »	Logged

Signatur wird geladen...

Stefek

WebsiteBaker Org e.V.

Offline

Offline

Posts: 4884

Re: Smoothscroll in Template integrieren

« Reply #3 on: November 30, 2008, 06:02:30 PM »

Hallo Justy,
hier ein kleines Backrezept:

Zutaten
1) smoothscroll.js
2) pfeil.gif
3) einige CSS Deklarationen

Step-by-Step
1) Öffne die index.php deines Templates und füge folgendes in den Headberich

Code:

2) sorge dafür, dass die Datei smoothscroll.js in dem Templatesordner ist.
3) Füge den folgenden Code in den body Bereich deines Templates (index.php)

Code:

<div id="backtotop">
<a href="#top" target="_top" title="back to top">
<img src="<?php echo TEMPLATE_DIR; ?>/pfeil.gif" alt="back to top" width="17" height="16" border="0"/>
</a>
</div>

4) Sorge dafür, dass die Gif Datei in dem Templatesfolder enthalten ist (oder in einem seiner Unterordner; in diesem Falle passe den Pfad in Schritt 3 an)
5) öffne die CSS Datei innerhalb des Templatesordners auf und füge das folgende ein

Code:

#backtotop { background-color: #deffb1; padding: 5px; position: fixed; right: 15px; bottom: 30px; border: solid 1px #4a5f70 }
* html body div#backtotop { background-color: #deffb1; text-align: left; margin-right: 5px; padding: 5px; position: fixed; right: 15px; bottom: 30px; width: 20px; height: 20px; float: right; clear: none; border: solid 1px #4a5f70 }

(die zweite Zeile ist für den IE6 - der sträubt sich davor, bei diesem Gimmick mitzumachen).

Das wärs eigentlich auch schon.

MfG,
Stefek


	Logged

"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)

justy

Offline

Posts: 44

Re: *gelöst* Smoothscroll in Template integrieren

« Reply #4 on: December 01, 2008, 11:18:30 AM »

Hallo,

besten Dank für das Backrezept cheesy

...die Anleitung hat super geklappt.

Erwähnenswert ist noch, daß bei der Step-by Step-Anleitung von Stefek...

Quote

Step-by-Step
1) Öffne die index.php deines Templates und füge folgendes in den Headbereich
Code:

<script type="text/javascript" src="<?php echo WB_URL; ?>/js-css/smoothscroll.js"></script>

...noch ein Ordner im Root-Verzeichnis mit dem Namen js-css angelegt werden muss und die Datei smoothscroller.js abgelegt werden muss...damit die Pfadangabe paßt.

Sollte jemand die Anleitung von Stefek umsetzen wollen ist noch zu erwähnen, wenn der Code hier aus dem Forum kopiert wird daß kein   zwischen die Code-Zeilen gerät sonst funktioniert der Code nicht.

Für die Verwendung der Smoothscroller-Datei von Maverik...

Quote

das ganze kannste dann in ein div packen und per css positionieren

script

http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/

...muss die Smoothscroller-Datei dann smooth.pack.js(für die Script-/Pfadangaben)heißen.

Ich möchte mich bei ALLEN für die freundliche Hilfe bedanken.

Mit freundlichem Gruß

Justy


« Last Edit: December 01, 2008, 11:31:26 AM by justy »	Logged

KLIPP & KoRN GbR - neue und gebrauchte Nutzfahrzeuge -Fahrzeugsicherstellung - 2x in Deutschland(Ziesar und Mühlacker)
http://www.klipp-korn.com

Stefek

WebsiteBaker Org e.V.

Offline

Offline

Posts: 4884

Re: *gelöst* Smoothscroll in Template integrieren

« Reply #5 on: December 01, 2008, 11:49:26 AM »

Quote from: justy on December 01, 2008, 11:18:30 AM

...noch ein Ordner im Root-Verzeichnis mit dem Namen js-css angelegt werden muss und die Datei smoothscroller.js abgelegt werden muss...damit die Pfadangabe paßt.

Hallo Justy, Du hast Recht, ich habe da nicht besonders drauf aufmerksam gemacht. Der Ordner js-css gehört ins root Verzeichniss.

Der Vorteil davon ist, dass man dann die Dateien aus diesem Ordner ziehen kann, wenn man auch mehrere Templates auf einer WB Installation verwendet. Das spart ein wenig Ladezeit, vor allem wennman Bibliotheken wie MooTools oder JQuery verwendet wink

Schönen Gruß,
Stefek


	Logged

"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)

Pages: [1] Go Up