Ankündigung

Einklappen
Keine Ankündigung bisher.

Scroll to top funktioniert nicht

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Scroll to top funktioniert nicht

    Hallo,

    ich versuche mich gerade an einem Javascript. Dieses scheint auf den ersten Blick zu funktionieren. Aber wenn das Script aktiv ist, dann funktioniert z.B. das Accordion nicht mehr. Ich verwende Bootstrap 3.3.1 Ich benötige dringend Hilfe beim Debuggen des Scriptes.

    Ich möchte die Lösung des Problems als Auftragsarbeit abgeben. Bitte eine PN an mich.


    Code:
    jQuery(function($) {
      
      // When to show the scroll link
      // higher number = scroll link appears further down the page
      var upperLimit = 100;
      
      // Our scroll link element
      var scrollElem = $('a#scroll-to-top');
      
      // Scroll to top speed
      var scrollSpeed = 100;
      
      // Show and hide the scroll to top link based on scroll position
      scrollElem.hide();
      $(window).scroll(function () {
        var scrollTop = $(document).scrollTop();
        if ( scrollTop > upperLimit ){
          $(scrollElem).stop().fadeTo(300, 1); // fade back in
        }else{
          $(scrollElem).stop().fadeTo(300, 0); // fade out
        }
      });
      
      // Scroll to top animation on click
      $(scrollElem).click(function(){
        $('html, body').animate({scrollTop:100}, scrollSpeed); return false;
      });
      
    });
    
    
    /* Anchorlink smooth scroll */
    jQuery(function($) {
      $('a[href*=#]:not([href=#])').click(function()
      {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            || location.hostname == this.hostname)
        {
          
          var target = $(this.hash),
          headerHeight = $(".primary-header").height() + 5; // Get fixed header height
          
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          
          if (target.length)
          {
            $('html,body').animate({
              scrollTop: target.offset().top - 240
            }, 500);
            return false;
          }
        }
      });
    });

  • #2
    [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

    Kommentar


    • #3
      Hallo

      Hier mein zweiter Versuch. Scroll to top funktioniert jetzt ohne Probleme.

      Jetzt nacht mir das accordion Probleme. Vielleicht läßt sich das Codestück auch nur lokal in der speziellen html datei und nicht global, wie ich ich es jetzt habe, einbinden. Bitte schaut einmal drüber.

      Vielen dank für die Hilfe.

      Hier der code für scroll to top.

      Code:
       $(function() {$
           // scroll handler$
           var scrollToAnchor = function( id ) {$
             // grab the element to scroll to based on the name$
             var elem = $("a[name='"+ id +"']");$
             // if that didn't work, look for an element with our ID$
             if ( typeof( elem.offset() ) === "undefined" ) {$
               elem = $("#"+id);$
             }$
            // if the destination element exists$
            if ( typeof( elem.offset() ) !== "undefined" ) {$
              // do the scroll$
              $('html, body').animate({$
                      scrollTop: elem.offset().top - 240$
              }, 1000 );$
            }$
          };$
          // bind to click event$
          $("a").click(function( event ) {$
            // only do this if it's an anchor link$
            if ( $(this).attr("href").match("#") ) {$
              // cancel default event propagation$
              event.preventDefault();$
              // scroll to the location$
              var href = $(this).attr('href').replace('#', '')$
              scrollToAnchor( href );$
            }$
          });$
        });$
      Hier kommt ein Ausschnitt vom Accordion.

      Code:
      <h5>Fragen</h5>$
                      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">$
                        <div class="panel panel-default">$
                          <div class="panel-heading" role="tab" id="uEins">$
                            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="false" aria-controls="collapseEins">Was ist das Onlineportal?<
                          </div>$
                          <div id="collapseEins" class="panel-collapse collapse" role="tabpanel" aria-labelledby="uEins">$
                          <div class="panel-body">$
                            <p>Das Onlineportal</p>$
                          </div>$
                          </div>$
                        </div>$
      hier das Stück Code, für welches ich scroll to top benötige

      Code:
      <a class="btn btn-default btn-block" href="#dts">Datenschutzklauseln</a>$
      
      <div id="scroll-to-top"></div>
      
                 <div class="page-header">
                     <div id="dts"><h4>Datenschutzklauseln</h4></div>
                   </div><!-- /.page-header -->
      
                   <div class="page-body">              
                     <h5>Datenverarbeitung auf dieser Internetseite</h5>
                   </div><!-- /.page-body -->
      
                   <div class="page-footer">
                     <a class="btn btn-warning btn-sm" role="button" href="#scroll-to-top" title="zur&uuml;ck nach oben">zur&uuml;ck nach oben</a>
                   </div><!-- /.page-footer -->

      Kommentar

      Lädt...
      X