Probleme mit Scroll to top mittels jQuery

[dn3d_fanboy]

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:

<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>

Den Scroll-to-top Button binde ich unter dem Footer ein:

    <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>
               
            <p class="copyright">&copy; Haus Kunterbunt | www.kindergarten-halft.de</p>
        </section>
    </footer>
       

    <a href="#top" class="scrollToTop" title="Zur&uuml;ck nach oben">Scroll To Top</a>

    <?php wp_footer(); ?>
   
</body>
</html>

Das CSS dazu sieht so aus:

/* --- 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;
    }

Und die Passage in der control.js so:

// 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;
        });
       
    });

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.

 

[patrick_l]

Wenn du eine Klasse ansprichst die nicht vorhanden ist, kann es auch nicht funktionieren.

$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 450) {
                $('.scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });
        // nach oben scrollen
        $('.scrollToTop').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
});

Liebe Grüße, Patrick

 

[pemis]

Ich kenne mich mit der Steuerung nicht aus, dennoch brennt mir auf den Fingernägeln die Machart der Webseite. Warum werden auf den stets unscharfen Bildern den Leuten einfach die Köpfe abgeschnitten. Verstehe ich nicht.

 

[dn3d_fanboy]

Ich kenne mich mit der Steuerung nicht aus, dennoch brennt mir auf den Fingernägeln die Machart der Webseite. Warum werden auf den stets unscharfen Bildern den Leuten einfach die Köpfe abgeschnitten. Verstehe ich nicht.

Die Bilder sind selbstverständlich noch Platzhalter.

Wenn du eine Klasse ansprichst die nicht vorhanden ist, kann es auch nicht funktionieren.

$(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 450) {
                $('scrollToTop').fadeIn();
            } else {
                $('.scrollToTop').fadeOut();
            }
        });
        // nach oben scrollen
        $('#scrollToTop').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
});

Liebe Grüße, Patrick

Leider funktioniert der geänderte Code auch nicht. Ich verstehe auch nicht ganz, warum zum nach-oben scrollen die ID #scrollToTop aufgeführt wird.

 

[patrick_l]

Leider funktioniert der geänderte Code auch nicht. Ich verstehe auch nicht ganz, warum zum nach-oben scrollen die ID #scrollToTop aufgeführt wird.

Die ID oder Klasse dient als Anker. Damit sagst du dem Script wohin denn gescrollt werden soll. Du kannst natürlich auch ein anderes Element ansprechen. Was du jedoch nicht machst. Hier mal ein Snippet für dich.

http://bootsnipp.com/snippets/featured/link-to-top-page

In deinem Script gibst du die Klasse .scrollTop als Scroll-Referenz an. Genau diese ist aber nicht vorhanden. Daher wird auch nicht gescrollt. Änder dies, und das Script funktioniert.

Liebe Grüße, Patrick