From 5e220637a60fcd4b5a84cda45efaf35a8facf29b Mon Sep 17 00:00:00 2001 From: BlueZED Date: Tue, 28 Jul 2015 12:10:22 +0200 Subject: [PATCH] Fixed issue with multiple fadeIn() calls --- ScrollTop.php | 4 ++-- assets/css/scroll-top.css | 6 +++--- assets/js/scroll-top.js | 15 ++++++++------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/ScrollTop.php b/ScrollTop.php index 124e7ff..06cb08a 100644 --- a/ScrollTop.php +++ b/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'] ); } } \ No newline at end of file diff --git a/assets/css/scroll-top.css b/assets/css/scroll-top.css index b72f774..9bed0b3 100644 --- a/assets/css/scroll-top.css +++ b/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; } \ No newline at end of file diff --git a/assets/js/scroll-top.js b/assets/js/scroll-top.js index e86c225..a7cf83b 100644 --- a/assets/js/scroll-top.js +++ b/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); }); }); \ No newline at end of file