github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(plugin): back to top button position when scroll to bottom

pull/351/head
ppoffice 2018-10-29 22:32:10 -04:00
parent 942d8493c6
commit a096717a0b
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
layout/plugin/back-to-top.ejs
View File

@ -9,7 +9,7 @@
bottom: 20px; bottom: 20px;
width: 64px; width: 64px;
padding: 8px 0; padding: 8px 0;
transition: 0.4s ease opacity, 0.4s ease transform; transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
opacity: 0; opacity: 0;
font-size: 0; font-size: 0;
transform: translateY(120px); transform: translateY(120px);
@ -34,6 +34,7 @@
<script> <script>
$(document).ready(function () { $(document).ready(function () {
var $button = $('#back-to-top'); var $button = $('#back-to-top');
var $footer = $('footer.footer');
var $mainColumn = $('.main .has-order-2'); var $mainColumn = $('.main .has-order-2');
var $leftColumn = $('.main .has-order-1'); var $leftColumn = $('.main .has-order-1');
var $rightColumn = $('.main .has-order-3'); var $rightColumn = $('.main .has-order-3');
@ -57,9 +58,21 @@
} else { } else {
$button.removeClass('fade-in'); $button.removeClass('fade-in');
} }
if ($footer.offset().top - $(window).scrollTop() + $button.outerHeight(true) / 2 + 20 < document.documentElement.clientHeight) {
$button.css('bottom', $(window).scrollTop() + document.documentElement.clientHeight - $footer.offset().top - $button.outerHeight(true) / 2);
$button.css('width', '40px');
$button.css('border-radius', '50%');
} else {
$button.css('width', '64px');
$button.css('bottom', '20px');
$button.css('border-radius', '4px');
}
$button.addClass('rise-up'); $button.addClass('rise-up');
} else { } else {
// mobile and tablet mode // mobile and tablet mode
$button.css('width', '64px');
$button.css('bottom', '20px');
$button.css('border-radius', '4px');
$button.addClass('fade-in'); $button.addClass('fade-in');
$button.css('left', ''); $button.css('left', '');
var scrollTop = $(window).scrollTop(); var scrollTop = $(window).scrollTop();