我一直在我的网站上使用Material-Design-Lite,我也使用JQuery来显示滚动到顶部的按钮。但他们没有合作。安装了Material-Design-Lite后,该按钮在点击时不执行任何操作。
<div class='back-to-top'>
<a class='hvr-icon-spin' href='#'/>
</div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 600);
return false;
});
</script>
有没有其他方法可以解决它?我试过不使用JQuery,但它也没有用。我正在尝试使用它的网站是qazxsw poi
这可能是由于主容器,标题的固定位置而发生的。材料设计在mdl容器中使用溢出。所以使用此代码滚动顶部:
here.
你可以尝试使用
$(".mdl-layout__content").animate({scrollTop:0}, 500, "slow");
您可以通过以下链接查看。
$('.mdl-layout__content').animate({scrollTop:0}, 'slow');
http://jsfiddle.net/6qrQF/88/
对我来说它适用于:
jQuery(document).ready(function() {
//set the link
jQuery('#top-link').topLink({
min: 500,
fadeSpeed: 100
});
//smoothscroll
jQuery('#top-link').click(function(r) {
jQuery("html, body").animate({ scrollTop: 0 }, 300);
});
});