Fixed issue with multiple fadeIn() calls

Author: bluezed

ScrollTop.php

@@ -35,10 +35,10 @@ public function run()
                     Html::tag(
                         'i', 
                         '', 
-                        ['class'=>'glyphicon glyphicon-menu-up scroll-top-circle']
+                        ['class'=>'glyphicon glyphicon-menu-up bluezed-scroll-top-circle']
                     ),
                     '#',
-                    ['id'=>'btn-top-scroller', 'class'=>'scroll-top']
+                    ['id'=>'btn-top-scroller', 'class'=>'bluezed-scroll-top']
                 );
     }
 }

assets/css/scroll-top.css

@@ -4,7 +4,7 @@
  * @license   https://github.com/bluezed/yii2-scroll-top/blob/master/LICENSE
  */
 
-.scroll-top {
+.bluezed-scroll-top {
     position: fixed;
     bottom: 10px;
     right: 15px;
@@ -13,7 +13,7 @@
     text-align: center;
 }
 
-.scroll-top-circle {
+.bluezed-scroll-top-circle {
     border-radius: 50%;
     width: 25px;
     height: 25px;
@@ -23,6 +23,6 @@
     color: #ffffff;
 }
 
-.scroll-top-circle:hover {
+.bluezed-scroll-top-circle:hover {
     background-color: #666666;
 }

assets/js/scroll-top.js

@@ -6,20 +6,21 @@
 
 $(function(){  
 
-    var btnScroller = $("#btn-top-scroller");
+    var btnScroller = $('#btn-top-scroller');
+    var scrollerTriggerPoint = $('html, body').offset().top + 150;
 
-    $(document).on("scroll", function() {
-        var top = $("html, body").offset().top;
-        if ($(window).scrollTop() > top+150) {
+    $(document).on('scroll', function() {
+        var pos = $(window).scrollTop();
+        if (pos > scrollerTriggerPoint && !btnScroller.is(':visible')) {
             btnScroller.fadeIn();
-        } else {
+        } else if (pos < scrollerTriggerPoint && btnScroller.is(':visible')) {
             btnScroller.fadeOut();
         }
     });
 
-    btnScroller.on("click", function(e) {
+    btnScroller.on('click', function(e) {
         e.preventDefault();
-        $("html, body").animate({ scrollTop: 0 }, 300);
+        $('html, body').animate({ scrollTop: 0 }, 300);
     });
 
 });