Contao 3.5.34: jquery scrollen funktioniert nicht

[mv-soft]

Hallo,

habe für den 'nach oben Button' wie imer ein Stück jquery eingebunden, was allerdings einfach NICHT funktioniert. Das ausblenden und das nach oben scrollen werden einfach NICHT umgesetzt.
Was habe ich übersehen?


- https://gutes-vom-hof.com
- jquery ist aktiviert


**********************

<script>
$(document).ready(function() {
$('div.nach_oben_link').hide();
$(window).scroll(function(){
var value = 200;
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('div.nach_oben_link').fadeIn();
} else {
$('div.nach_oben_link').fadeOut();
}
});
$('div.nach_oben_link').click(function(){
$('html, body').animate({scrollTop:'0px'}, 1000);
return false;
});
});
</script>

*************************************



Vielen Dank für Hinweise.

[Andreas]

Die Seite ist im Wartungsmodus. Hier dein Code leserlich.

<script>
  $(document).ready(function() {

    $('div.nach_oben_link').hide();

    $(window).scroll(function() {
      var
        value = 200,
        scrolling = $(window).scrollTop()
      ;

      if (scrolling > value) {
        $('div.nach_oben_link').fadeIn();
      }
      else {
        $('div.nach_oben_link').fadeOut();
      }
    });

    $('div.nach_oben_link').click(function() {
      $('html, body').animate({
        scrollTop: '0px'
      }, 1000);
      return false;
    });
  });
</script> 

[mv-soft]

ups ... der Wartungsmodus wurde deaktiviert.

Die Lösung:

Neben jquery ist auch mootools aktiv, was für den verwendeten Online- Shop notwendig ist. Das Mootool Framework wurde jetzt per CDN mit Fallback eingebunden. Das hat den Konflikt behoben und das sanfte scrollen zum Seitenanfang funktioniert nunmehr korrekt.

Vielen Dank für die Unterstützung


www.mv-soft.de

[Andreas]

Das solltest du nicht machen. Binde MooTools von lokal ein und kapsele dein Script richtig. Kann man sich auch von den j_- und moo_Templates abschauen.

<script>
  (function($) {
    $(document).ready(function() {

      $('div.nach_oben_link').hide();

      $(window).scroll(function() {
        var
          value = 200,
          scrolling = $(window).scrollTop()
        ;

        if (scrolling > value) {
          $('div.nach_oben_link').fadeIn();
        }
        else {
          $('div.nach_oben_link').fadeOut();
        }
      });

      $('div.nach_oben_link').click(function() {
        $('html, body').animate({
          scrollTop: '0px'
        }, 1000);
        return false;
      });
    });
  })(jQuery);
</script> 

[Andreas]

Du hast den charset falsch angegeben. "“utf-8”" ist kein gültiges character encoding. Benutze "utf-8".

'type="text/javascript"' ist für HTML5 überflüssig.

Attribut "BORDER" für IMGs ist schon lange obsolet.

Du hast HTML-Code unterhalb von </body>. Das ist nicht erlaubt.

...
  </body>

  <script async src="https://www.mv-soft.de/majax/majax.min.js" type="text/javascript" ></script>
  <script async type="text/javascript" src="js/jquery.colorbox-min.js" ></script>
  <script async type="text/javascript" src="js/jquery.sticky.js" ></script>
  <script type="text/javascript">
  ...
  </script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</html>

Tabs als Einrückung bei HTML ist nicht so schön. Benutze Leerzeichen bei HTML.