Плавный прокрутка по нажатию кнопки: не работает для меня, но отлично работает в фрагменте кода

Я новичок в JavaScript и jQuery. Мои коды css и JavaScript являются внешними по отношению к html-файлу. На этот вопрос уже есть ответы, и я попробовал, пробовал все коды, но прокрутка не работает. Я не знаю, что я пропустил. Установлен jQuery (даже CDN). Ну, этот код работает во фрагменте, поэтому, вероятно, что-то не так с javaScript или JQuery. Тем не менее, я не знаю, в чем моя ошибка. Пожалуйста помоги. Плавный прокрутка по нажатию кнопки: не работает для меня, но отлично работает в фрагменте кода

$("#btn1").click(function() { 
 
    $('html,body').animate({ 
 
     scrollTop: $("#fir").offset().top}, 
 
     'slow'); 
 
}); 
 

 
$("#btn2").click(function() { 
 
    $('html,body').animate({ 
 
     scrollTop: $("#sec").offset().top}, 
 
     'slow'); 
 
});

.button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;} 
 
.main{ width: 100%; height:500px; background:black; } 
 
.first{ width: 100%; height: 1000px; background: green; } 
 
.second{ width: 100%; height: 1000px; background: blue; }

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
    </head> 
 

 
    <body> 
 
    <script \t src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN --> 
 
    <script>window.jQuery || document.write('<script src="JQuery.js"><\/script>');</script> <!-- JQuery library --> 
 
    <script src="js/script.js" type="text/javascript"></script> <!-- my javascript --> 
 

 
    <div class="main"> 
 
    <button id="btn1" type="button" class="button1">Sign Up</button> 
 
    <button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div> 
 
    <div id="fir" class="first"></div> 
 
    <div id="sec" class="second"></div> 
 

 
    </body> 
 
    </html>

источник

2016-03-16 Sudi

В этом случае, как вы можете видеть из фрагмента, все в порядке с вашим кодом. Я советую вам проверить его с помощью разных браузеров, чтобы расширить видение проблемы. – markoffden

Да, я уже сделал это, и он не работает. JavaScript работает отлично. Проверено с помощью $ (function() {alert();}); – Sudi

попробуйте 2000 значение скорости вместо медленного в scrollTop. – GuRu

Я объединил (для простоты моего теста) все элементы в опалить .html файл с некоторыми изменениями, и это работает для меня:

движение script метки в конце документ
добавить document.ready() логика

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
<style type="text/css"> 
    .button1{ position:absolute; top:130px; left:150px; font-size: 10px; cursor:pointer; color:#000000;} 
    .main{ width: 100%; height:500px; background:black; } 
    .first{ width: 100%; height: 1000px; background: green; } 
    .second{ width: 100%; height: 1000px; background: blue; } 
</style> 
<div class="main"> 
<button id="btn1" type="button" class="button1">Sign Up</button> 
<button id="btn2" type="button" class="button1" style=left:250px>Sign In</button></div> 
<div id="fir" class="first"></div> 
<div id="sec" class="second"></div> 

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- JQuery CDN --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btn1").click(function() { 
      $('html,body').animate({ 
       scrollTop: $("#fir").offset().top}, 
       'slow'); 
     }); 
     $("#btn2").click(function() { 
      $('html,body').animate({ 
       scrollTop: $("#sec").offset().top}, 
       'slow'); 
     });   
    }); 

</script> 
</body> 
</html>

источник

2016-03-16 18:04:03

Это сработало. Благодарю. Но один вопрос, это подходящий способ поставить его в конце или это стандарт? – Sudi

Я не знаю, сохранилась ли она (особенно в последних браузерах), но в старые добрые времена рендеринг страниц был заблокирован при загрузке и выполнении сценариев на странице и даже в худших сценариях, где загружался и исполнялся последовательным образом - в случае для сегодняшние браузеры. –

1 вопрос ответ пожалуйста. Для того же кода, который я разместил выше, у меня есть форма и кнопка отправки в конце. Когда я нажимаю кнопку, прокрутка вернется к началу. Как сохранить его в той же позиции при обновлении или публикации данных ... – Sudi

Плавный прокрутка по нажатию кнопки: не работает для меня, но отлично работает в фрагменте кода

ответ

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