Прокрутка jquery animation отсутствует div

У меня есть анимация scrool, указывающая на «шаг 2», но анимация идет полностью до «шага 3». Хотя моя ссылка на шаг 3, похоже, работает с одной и той же функцией. Я не могу понять, почему это не останавливается на правом div, спасибо за помощь!Прокрутка jquery animation отсутствует div

вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
<style> 
.out{background:gray;height:300px;} 
.box{height:300px;overflow:auto;} 
.question1{background:red;height:300px;} 
.question2{background:green;height:300px;} 
.question3{background:blue;height:300px;} 
.question4{background:yellow;height:300px;} 
</style> 
</head> 

<body> 
<div class="out"> 
    here 
</div> 
<div class="box"> 
    <div class="question1" id="step1"> 
     step 1<br> 
     <a href="#step2">Step 2</a> 
    </div> 
    <div class="question2" id="step2"> 
     step 2<br> 
     <a href="#step3">step 3</a> 
    </div> 
    <div class="question3" id="step3"> 
     step 3 
    </div> 
    <div class="question4" id="step4"> 
     step 4 
    </div> 
</div> 
<div class="out"> 
    here 
</div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $('a[href^="#"]').click(function(){ 
     var the_id = $(this).attr("href"); 
     $('.box').animate({ 
      scrollTop:$(the_id).offset().top 
     }, 'slow'); 
     return false; 
    }); 

}); 
</script> 
</html>

источник

2013-06-13 novoa

Причины, по которым семанты будут отсутствовать после запятой после $ (the_id) .position(). Top; Я ставлю вам код в jsfiddle и теперь он отлично работает для меня в то есть & светлячка: http://jsfiddle.net/HZTDE/1/

scrollTop:$(the_id).offset().top;

У JavaScript есть механизм, который пытается исправить неисправные программы, автоматически вставляя точки с запятой. Не зависеть от этого. Он может маскировать более серьезные ошибки. Иногда он вставляет точки с запятой в места, где их не приветствуют. Рассмотрим последствия ввода точки с запятой в операторе return. Если возвращаемый оператор возвращает значение, это выражение выражения должно начинаться в той же строке, что и возврат:

источник

2013-06-13 08:09:28

но он потерял анимацию – novoa

Знаешь, как сохранить анимацию, пожалуйста? – novoa

Вы правы, и без полуколоны он, казалось, пересчитал смещения на лету, так как предложение, вот адаптированная версия, которая работает в firefox и т. Е. (Не была другой); в основном идея состоит в том, чтобы сохранить исходные смещения во время загрузки; http://jsfiddle.net/HZTDE/3/ –

Вы размещаете свои дивы и якоря неправильно!

Кроме того, в зависимости от того, как вы установили свой HTML, вы можете попробовать использовать $(the_id).position().top + 'px'

.position() получает смещение отношение к часам родителя, в то время как смещение() использует границы документа.

источник

2013-06-13 07:58:09 Alex

Можете ли вы показать мне, как тп разместить мои div/якоря, пожалуйста? http://jsfiddle.net/yv6Rt/394/ – novoa

Прокрутка jquery animation отсутствует div

ответ

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