AngularJS Animated scroll to top-Thema

viele web-site-feature für die lange Seite, wie wenn der Benutzer nach unten scrollen, aber dann ein Pfeil-Zeichen kommt auf der rechten Seite und wenn Benutzer klicken Sie auf diesen Pfeil, dann die Seiten nach oben. ich versuche, das gleiche zu tun mit benutzerdefinierten Richtlinie. mein code funktioniert, aber es gibt ein Problem, wenn programmgesteuert Seite scrollen nach oben dann einige Zeit arrow Zeichen ist immer sichtbar und unsichtbar, die sieht schlecht aus. also meine bitte einige sehen mein code in jsfiddle und mir empfehlen, was falsch ist es, die Ursachen Pfeil-Zeichen immer sichtbar und unsichtbar.

hier mein jsfiddle https://jsfiddle.net/tridip/hzgjcojg/2/

habe ich gemischte bisschen jquery, weil ich nicht weiß, wie das zu erreichen ist es rein von java-script und jquery ist sehr einfach, mit glatten Effekt mit animate-Funktion.

siehe bitte meinen code an und geben Ihren Vorschlag, warum einige Zeit, die Pfeil-Zeichen ist immer sichtbar-und unsichtbar während Seite nach oben.

siehe mein code

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  for (var i=0; i<100; i++) { $scope.items.push(i); }
});

app.directive('scrollOnClick', function() {
  return {
    restrict: 'EA',
    template:'<a title="Click here to go top" class="scrollup" href="#" >Scroll</a>',
    link: function(scope, $elm) {
$(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
    });   
      $elm.on('click', function() {
        //alert('hello');
        $("html,body").animate({scrollTop: 0}, "slow");
      });
    }
  }
});

Dank



One Reply
  1. 2

    Es ist, weil Sie eine <a> tag mit href="#" wie Ihre Vorlage in Ihrer Richtlinie. Es zeigt das Fenster die scroll-position als 0 für die erste Instanz, wenn Sie sich die $(this).scrollTop() im $(window).scroll – Funktion, die führt, um die fade-animation zu starten, Ausblendung und gleich nach dem verblassen wieder. Ein Weg, um es Arbeit ist, ersetzen Sie die Vorlage durch ein div oder etwas anderes ODER entfernen der href aus der Vorlage.

    Fiddle: https://jsfiddle.net/tmdy51rh/3/

    EDIT:

    Ohne jQuery könnte man etwas wie das hier tun:

    Fiddle: https://jsfiddle.net/tmdy51rh/5/

    • eine kleine Frage ohne die Verwendung von jquery wie kann ich den gleichen Effekt erzielen. posten würdest jeder code, wo Sie nicht verwenden jquery. vielen Dank für Ihre große Hilfe.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.