Ссылка на прокрутку вверх не работает

Я не могу понять, почему это не дает мне анимации. Он попадает в начало страницы, как предполагалось, но анимации нет. Может кто-нибудь помочь мне узнать почему?Ссылка на прокрутку вверх не работает

здесь И.Д. Javascript код

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
$(document).ready(function() { 

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

}); 
</script> 

</head> 

<body id="top">

и вот ссылка, что мне нужно, чтобы выполнить прокрутку.

<td><a href="#top" class="scrollup">Back to Top</a></td>

еще раз, он попадает в начало страницы, но анимации нет.

Редактировать здесь весь html-файл.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"> 
$(document).ready(function() { 

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

}); 
</script> 

</head> 

<body id="top"> 
<div id="header"> 
    <div class="container"> 
     <div id="title">Name</div> 
     <div id="tagline">Web Designer + Programmer</div> 
     <div id="navbar"> 
      <table> 
       <tbody> 
        <tr> 
         <td><a href="#services">Services</a></td><td><a href="#about">About</a></td><td><a href="#contact">Contact</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

<div id="services"> 
    <div class="container"> 
     <div id="servicescontent"></div> 
    </div> 
</div> 

<div id="about"> 
    <div class="container"> 
     <div id="aboutcontent"></div> 
    </div> 
</div> 

<div id="services2"> 
    <div class="container"> 
     <div id="services2content"></div> 
    </div> 
</div> 

<div id="contact"> 
    <div class="container"> 
     <div id="contactinfo"></div> 
    </div> 
</div> 

<div id="footer"> 
    <div class="container"> 
     <div id="copyright">Copyright 2013</div> 
     <div id="footernavbar"> 
      <table style="font-size: 16px;"> 
       <tbody> 
        <tr> 
         <td><a href="#about">About</a></td><td><a href="#services">Services</a></td><td><a href="#top" class="scrollup">Back to Top</a></td> 
        </tr> 
       </tbody> 
      </table> 
     </div></div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-03-03 zachstarnes

его довольно нетрадиционным для вашего тела. Кроме того, вы должны добавить в свой jquery и начать свой скрипт под новым тегом, чтобы быть аккуратным –

спасибо за совет. done :) – zachstarnes

@skidadon правильный, 0, вероятно, решит его. Но у вас также есть некорректно отформатированные теги скриптов. Вам нужен отдельный тег для JQuery и отдельный для кода, который вы используете. Это также может помочь использовать event.preventDefault() в верхней части обработчика событий. Вот простое изменение вашего кода:

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
       $('.scrollup').click(function(event){ 
        event.preventDefault(); 
        $("html, body").animate({ scrollTop: 0 }, 600); 
       }); 
     }); 
    </script> 
</head> 
<body id="top"> 

    <div style="height: 900px"> 
     Some content 
    </div> 
    <div> 
     <a href="#" class="scrollup">go to top</a> 
    </div> 
</body> 
</html>

Надеюсь, что это поможет.

источник

2013-03-03 19:24:39

работал так сильно, как отмечали теги скриптов! – zachstarnes

Это не target_top, это 0

$("html, body").animate({ scrollTop: 0 }, "slow");

Это должно сделать трюк.

источник

2013-03-03 19:08:59 skidadon

+1, избили меня http://jsfiddle.net/ZHrxp/ –

извините, но это не сработало. еще нет анимации :(спасибо за вход, хотя – zachstarnes

@zachstarnes должен работать нормально, см. скрипку –

Ссылка на прокрутку вверх не работает

ответ

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