在Chrome中>使用animate-scrollTo时jQuery闪烁

时间:2016-10-14 16:38:24

标签: javascript jquery html css google-chrome

使用下面的代码适用于Firefox,Edge和Chrome移动设备,但是当它在最新版本的Chrome中达到顶峰时,我无法获得该元素的闪烁效果?

我需要为浏览器调整哪些想法?

    $(document).ready(function(){
var $backToTop = $(".back-to-top");
/* this hides the back to top button when the page first loads */
$backToTop.hide();
/* now we need to write a function that makes the back to top button appear after the user has scrolled a certain amount */
$(window).on('scroll', function() {
 if ($(this).scrollTop() > 600) { /* back to top will appear after the user scrolls 600 pixels */
 $backToTop.fadeIn();
 } else {
 $backToTop.fadeOut();
 }
});
/* this function activates a smooth scroll to the top of the page when the back to top button is clicked */
$backToTop.on('click', function(e) {
     e.preventDefault();
 $("html, body").animate({scrollTop: 0}, 500);
 return false;
});
})



 <a href="#" class="back-to-top" style="display: inline;">
<i class="fa fa-arrow-circle-up">Back to Top</i> 
</a>

.back-to-top { 
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 160px;
height: 70px;
z-index: 100;
display: none;
text-decoration: none;
color: #ffffff;
background-color: #6eb1b5; 
box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.12);
padding:25px;
}
.back-to-top i {
  font-size: 18px;
}

0 个答案:

没有答案