Почему мой свиток не прокручивается плавно?

-1

Для начала, вот index.htmlПочему мой свиток не прокручивается плавно?

<html> 
    <head> 
     <title>Demo</title> 
     <link rel="stylesheet" type="text/css" href="stuff.css"/> 
    </head> 
    <body> 


     <div class=passage> 

<h1>Getting Started</h1> 
      <p> 
       To get started, click one of the <a href="#" class="scrollup">four buttons</a> that are above. Each button will take you to its appropriate page. 
      </p><br> 

      <h1>Questions/Concerns</h1> 
      <p> 
       If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page. 
      </p><br> 


     </div> 


     <script src="https://code.jquery.com/jquery-latest.js"></script> 
    </body> 
</html>

Вот stuff.css

.passage { 
    margin-top: 40px; 
    margin-left: 200px; 
    margin-right: 200px; 
    border-radius: 25px; 
    float: left; 
    height: 1000px; 
} 

.passage p{ 
    margin-left: 10px; 
} 

.passage h3{ 
    font-style: bold; 
} 

.scrollup { 

}

А вот stylescripts.js

<!DOCTYPE HTML> 
<html> 
    <body> 
     <script> 
$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
     } else { 
      $('.scrollup').fadeOut(); 
     } 
    }); 

    $('.scrollup').click(function() { 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 600); 
     return false; 
    }); 

}); 
</script> 
</body> 
</html>

Так что я пытаюсь сделать, это сделайте так, чтобы, когда я нажимаю «четыре кнопки» в index.html, страница index.html будет плавно переходить на верх. К сожалению, этого не происходит, и он просто телепортируется в верх без медленного движения. Я довольно nooby, когда дело доходит до javascript, поэтому я подумал, что я бы спросил здесь: что я делаю неправильно, что я не могу получить гладкое движение прокрутки вверху, когда я нажимаю «четыре кнопки»?

Спасибо, оцените.

источник

2016-01-15 john

возможно: http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link –

You 'stylescripts.js' должен содержать только' script' .. почему он содержит 'html'? Его недействительный .. и вы не указали свой 'stylescripts.js' где-нибудь в своем' html' ... Поэтому не ожидайте, что анимация произойдет. –

Он работает, когда вы правильно пишете stylescripts.js.

Я попытался скопировать ваш код javascript в html-файл, как показано ниже, и он работает правильно. (Для проверки цели, я добавил некоторые элементы на HTML.)

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Demo</title> 
     <link rel="stylesheet" type="text/css" href="stuff.css"/> 
    </head> 
    <body> 


     <div class=passage> 

      <h1>Getting Started</h1> 
      <p> 
       To get started, click one of the four buttons that are above. Each button will take you to its appropriate page. 
      </p><br> 

      <h1>Questions/Concerns</h1> 
      <p> 
       If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page. 
      </p><br> 


     </div> 
     <div> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <p>:</p> 
      <a href="#" class="scrollup">four buttons</a> 
     </div> 

     <script src="https://code.jquery.com/jquery-latest.js"></script> 
     <script> 
      $(document).ready(function() { 

       $(window).scroll(function() { 
        if ($(this).scrollTop() > 100) { 
         $('.scrollup').fadeIn(); 
        } else { 
         $('.scrollup').fadeOut(); 
        } 
       }); 

       $('.scrollup').click(function() { 
        $("html, body").animate({ 
         scrollTop: 0 
        }, 600); 
        return false; 
       }); 

      }); 
     </script> 
    </body> 
</html>

источник

2016-01-15 04:00:56 tkhm

Почему мой свиток не прокручивается плавно?

ответ

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