Auf Thema antworten

Beitrag

<blockquote data-quote="dn3d_fanboy" data-source="post: 2465595" data-attributes="member: 547472">Hallo,ich versuche verzweifelt in einem eigenen Theme ein Scroll-to-top Button einzubauen. In meiner HTML-Vorlage funktioniere das alles ohne Probleme, nur beim Einbau in das WP-Theme scheint es irgendwo Probleme zu geben. Und zwar möchte ich es nicht mit einem Plugin einbauen, sondern hardcodiert.Es geht um die Seite Die JS-Datei binde ich im Header ein, dort ist auch der Ankerpunt, zu dem Zurückgescrollt werden soll: [php]&lt;header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script src=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/js/control.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=&quot;main&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php wp_nav_menu(array( 'theme_location' =&gt; 'main-menu' )); ?&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &lt;/header&gt;&nbsp; &nbsp; &lt;a name=&quot;top&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;section id=&quot;slider-box&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo do_shortcode(&quot;[metaslider id=796]&quot;);&nbsp; &nbsp; &nbsp; &nbsp; ?&gt;&nbsp; &nbsp; &lt;/section&gt;[/php]Den Scroll-to-top Button binde ich unter dem Footer ein:[php]&nbsp; &nbsp; &lt;footer&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;section id=&quot;footer-area&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=&quot;legal&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php wp_nav_menu(array( 'theme_location' =&gt; 'footer-menu' )); ?&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;section class=&quot;footer-contact&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h4&gt;Senden Sie uns eine Nachricht&lt;/h4&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php echo do_shortcode( '[contact-form-7 id=&quot;5&quot; title=&quot;Footer Formular&quot;]' ); ?&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;nav class=&quot;social&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;?php wp_nav_menu(array( 'theme_location' =&gt; 'social-menu' )); ?&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p class=&quot;copyright&quot;&gt;&amp;copy; Haus Kunterbunt | www.kindergarten-halft.de&lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;/footer&gt;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &lt;a href=&quot;#top&quot; class=&quot;scrollToTop&quot; title=&quot;Zur&amp;uuml;ck nach oben&quot;&gt;Scroll To Top&lt;/a&gt;&nbsp; &nbsp; &lt;?php wp_footer(); ?&gt;&nbsp;&nbsp; &lt;/body&gt;&lt;/html&gt;[/php]Das CSS dazu sieht so aus:[code=CSS]/* --- SCROLL TO TOP --- */.scrollToTop{&nbsp; &nbsp; width:32px;&nbsp; &nbsp; height:32px;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; font-size: 0px;&nbsp; &nbsp; color: #444;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; bottom:25px;&nbsp; &nbsp; right:15px;&nbsp; &nbsp; display:none;&nbsp; &nbsp; background: url(images/arrow-up.png);&nbsp; &nbsp; opacity: 0.5;&nbsp; &nbsp; z-index: 2560;&nbsp; &nbsp; -moz-transition: all 0.2s ease-in;&nbsp; &nbsp; -webkit-transition: all 0.2s ease-in;&nbsp; &nbsp; -o-transition: all 0.2s ease-in;&nbsp; &nbsp; transition: all 0.2s ease-in;}.scrollToTop:hover{&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; opacity: 0.9;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [/code]Und die Passage in der control.js so:[code=JavaScript]// Scroll to top&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Check to see if the window is top if not then display button&nbsp; &nbsp; &nbsp; &nbsp; $(window).scroll(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(this).scrollTop() &gt; 450) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.scrollToTop').fadeIn();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.scrollToTop').fadeOut();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Click event to scroll to top&nbsp; &nbsp; &nbsp; &nbsp; $('.scrollToTop').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('html, body').animate({scrollTop : 0},800);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; });[/code]Ich bin ein wenig verzweifelt, weil ich nicht weiß wo ich noch den Fehler suchen soll. Wie erwähnt in einer reinen HTML-Version hat es, glaube ich zumindest, einwandfrei geklappt.Vielleicht habe ich auch nur ein Brett vorm Kopp und sehe den Fehler nicht. Ich hoffe ihr könnt mir helfen.Besten Dank schonmal im Voraus.</blockquote>

[QUOTE="dn3d_fanboy, post: 2465595, member: 547472"] Hallo, ich versuche verzweifelt in einem eigenen Theme ein Scroll-to-top Button einzubauen. In meiner HTML-Vorlage funktioniere das alles ohne Probleme, nur beim Einbau in das WP-Theme scheint es irgendwo Probleme zu geben. Und zwar möchte ich es nicht mit einem Plugin einbauen, sondern hardcodiert. Es geht um die Seite Die JS-Datei binde ich im Header ein, dort ist auch der Ankerpunt, zu dem Zurückgescrollt werden soll: [php]<header> <script src="<?php echo get_template_directory_uri(); ?>/js/control.js" type="text/javascript"></script> <nav class="main"> <?php wp_nav_menu(array( 'theme_location' => 'main-menu' )); ?> </nav> </header> <a name="top"></a> <section id="slider-box"> <?php echo do_shortcode("[metaslider id=796]"); ?> </section>[/php] Den Scroll-to-top Button binde ich unter dem Footer ein: [php] <footer> <section id="footer-area"> <nav class="legal"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu' )); ?> </nav> <section class="footer-contact"> <h4>Senden Sie uns eine Nachricht</h4> <?php echo do_shortcode( '[contact-form-7 id="5" title="Footer Formular"]' ); ?> </section> <nav class="social"> <?php wp_nav_menu(array( 'theme_location' => 'social-menu' )); ?> </nav> <div class="clearfix"></div> © Haus Kunterbunt | www.kindergarten-halft.de </section> </footer> <a href="#top" class="scrollToTop" title="Zurück nach oben">Scroll To Top</a> <?php wp_footer(); ?> </body> </html>[/php] Das CSS dazu sieht so aus: [code=CSS]/* --- SCROLL TO TOP --- */ .scrollToTop{ width:32px; height:32px; padding:0; text-align:center; font-weight: bold; font-size: 0px; color: #444; text-decoration: none; position:fixed; bottom:25px; right:15px; display:none; background: url(images/arrow-up.png); opacity: 0.5; z-index: 2560; -moz-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .scrollToTop:hover{ text-decoration:none; opacity: 0.9; } [/code] Und die Passage in der control.js so: [code=JavaScript]// Scroll to top $(document).ready(function(){ //Check to see if the window is top if not then display button $(window).scroll(function(){ if ($(this).scrollTop() > 450) { $('.scrollToTop').fadeIn(); } else { $('.scrollToTop').fadeOut(); } }); //Click event to scroll to top $('.scrollToTop').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); });[/code] Ich bin ein wenig verzweifelt, weil ich nicht weiß wo ich noch den Fehler suchen soll. Wie erwähnt in einer reinen HTML-Version hat es, glaube ich zumindest, einwandfrei geklappt. Vielleicht habe ich auch nur ein Brett vorm Kopp und sehe den Fehler nicht. Ich hoffe ihr könnt mir helfen. Besten Dank schonmal im Voraus. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Der grüne Frosch hüpft über die Hügel an den Bäumen vorbei in die Höhle. Bitte nenne das zweite Wort!