Как прокрутить вверх с помощью JQuery и Material-Design-Lite

Я использую 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() &gt; 200) {
      $(&#39;#back-to-top&#39;).fadeIn();
        } else {
        $(&#39;#back-to-top&#39;).fadeOut();
        }
        });
      $(&#39;#back-to-top&#39;).hide().click(function() {
        $(&#39;html, body&#39;).animate({scrollTop:0}, 600);
        return false;
        });
</script>

Есть ли альтернативный способ ее решения? Я пробовал не использовать JQyery, но это тоже не сработало. Веб-сайт, который я пытаюсь использовать, находится здесь.


javascript jquery css material-design-lite
person Henrique Barcelos    schedule 28.07.2015    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Это может произойти из-за фиксированного положения вашего основного контейнера header. И материальный дизайн использует переполнение в контейнере mdl. Поэтому используйте этот код для прокрутки вверх:

$(".mdl-layout__content").animate({scrollTop:0}, 500, "slow");
person Rahul Sagore    schedule 12.10.2015

arrow_upward
1
arrow_downward

Вы можете попробовать использовать

$('.mdl-layout__content').animate({scrollTop:0}, 'slow');
person csi0n    schedule 31.10.2016

arrow_upward
0
arrow_downward

Вы можете проверить по ссылке ниже.

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);
  });
});
person Steevan    schedule 28.07.2015
comment
Когда вы включаете MDL, кнопка все равно не появляется. Проверьте код здесь (jsfiddle.net/6qrQF/97) и полностью "работает" здесь ( jsfiddle.net/6qrQF/97/embedded/result). - person Henrique Barcelos; 28.07.2015

arrow_upward
0
arrow_downward

Для меня это работало с:

$('.mdl-layout').animate({scrollTop:0}, 'slow');
person Ferran Maylinch    schedule 18.04.2019