JQuery Animate ScrollTop не работает

Я пытаюсь сделать страницу прокруткой вниз до '.block3' при нажатии на зеленый блок. Что мне здесь не хватает? Кажется, я не могу заставить его работать, и я проверил подобные темы без везения.JQuery Animate ScrollTop не работает

$(document).ready(function() { 
 
    $('.down').click(function() { 
 
    alert("y no work?"); 
 
    $('html', 'body').animate({ 
 
     scrollTop: $('.block3').offset().top 
 
    }, 800, "easeOutQuart"); 
 
    }); 
 
});

.down { 
 
    background: green; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.block1,.block2,.block3 { 
 
    background: red; 
 
    width: 200px; 
 
    height: 600px; 
 
    margin: 1em 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="down"></div> 
 
<div class="block1"></div> 
 
<div class="block2"></div> 
 
<div class="block3"></div>

источник

2016-09-29 Calisto

Проблема была selector. Вы можете прокручивать только один элемент за раз. А для облегчения вам нужны дополнительные библиотеки.

Я заметил, что ваш свиток не доходит до конца. Я полагаю, что это отступы

$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
\t \t $('body').animate({scrollTop:$('.block3').offset().top}, 800, 'linear'); 
 
\t }); 
 
    
 
});

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div>

источник

2016-09-29 17:18:58

Попробуйте это:

Вы должны отделить каждый селектор с запятой.

$(document).ready(function() { 
 
    
 
    $('.down').click(function() { 
 
     
 
     alert("y no work?"); 
 
     
 
     $('html,body').animate({ 
 
      
 
      scrollTop: $('.block3').offset().top}, 800, "linear"); 
 
    }) 
 
    
 
})

.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;}

<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

источник

2016-09-29 17:29:13 Ehsan

Я заметил, что вы не JQuery UI, что может быть причиной, почему easeOutQuart не работает, линейный нормально, если вы не хотите использовать easeOutQuart.

Чтобы включить easeOutQuart или другие специальные пользовательский интерфейс, включают в себя JQuery UI

источник

2016-09-29 17:34:37 medev21

Просто включите JQuery UI

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<html> 
 
<body> 
 
<div class="down"></div> 
 

 
<div class="block1"></div> 
 

 
<div class="block2"></div> 
 

 
<div class="block3"></div> 
 
<style> 
 
.down {background:green; width:50px; height:50px; } 
 
.block1, .block2, .block3 { background:red; width:200px; height:600px; margin: 1em 0;} 
 
</style> 
 
<script> 
 
$(document).ready(function() { 
 

 
\t $('.down').click(function() { 
 
     alert("y no work?"); 
 
\t \t $("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart"); 
 
\t }); 
 
    
 
}); 
 
</script> 
 
</body> 
 
</html>

библиотека затем повторите попытку все ваши сценарии должны отлично.

Спасибо!

источник

2016-09-29 17:34:44 Plycoder

Вместо использования:

$("html, body").animate({scrollTop:$('.block3').position().top}, 800, "easeOutQuart");

использования верхнего объекта + высота:

$("html, body").animate({scrollTop:$('.block3').position().top + $('.block3').height()}, 800, "easeOutQuart");

источник

2016-09-29 18:35:42

ответ

Смежные вопросы