Javascript 使用动画跳转页面-菜单到div_Javascript_Jquery_Html_Css

Javascript 使用动画跳转页面-菜单到div

javascript jquery html css

Javascript 使用动画跳转页面-菜单到div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,首先，很抱歉我的英语不好，我不是以英语为母语的人。第二，我真的从Jquery开始，我在很多论坛上搜索了很多所以我有一个html、css和JS文件因此，我正在尝试这样做：当我点击一个锚点，动画（跳）到一个div 我正在尝试以下代码： $(#lnkInicio).click(function() { $('html, body').animate({ 'scrollTop': $('#perfil').offset().top

首先，很抱歉我的英语不好，我不是以英语为母语的人。第二，我真的从Jquery开始，我在很多论坛上搜索了很多

所以

我有一个html、css和JS文件

因此，我正在尝试这样做：当我点击一个锚点，动画（跳）到一个div

我正在尝试以下代码：

$(#lnkInicio).click(function() {
         $('html, body').animate({
           'scrollTop':   $('#perfil').offset().top
         }, 2000);
    });

但它不起作用

testeBotao是我的主播id。 perfil是我的部门id。看看这个：当我使用此选项时，它会起作用，但当创建页面时：

$(document).ready(function() {
     $('html, body').animate({
       'scrollTop':   $('#perfil').offset().top
     }, 2000);
});

我想把它放在主播点击“事件”

我做错了什么

为了简化，以下是我的html代码：

<!DOCTYPE html>
<html lang='pt-br'>
<head>
<meta charset='utf-8'>
<title> Teste - Menu</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
    <header id="header-principal">
    <h1 id="titulo"> My page </h1>
        
   <nav id="menu">
   <ul>
       <li><a id="lnkInicio" href='#'>Início</a></li>
       <li><a id="lnkPerfil" href='#perfil'>Perfil</a></li>
       <li><a id="lnkMatricula" href='#'>Matrícula</a></li>
       <li><a id="lnkBoletim" href='#'>Boletim</a></li>
   </ul>
   </nav>
    </header>
    
    <div id="inicio"> 
    <p> some text here or elements </p>
    </div>
    <div id="perfil">
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    <p> I wanna to jump here :/ </p>
    
    </div>
</ul>
</body>
</html>


测试菜单
我的页面






这里有一些文本或元素
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/
我想跳到这里：/

选择器周围缺少引号

#lnkInicio

：

$('#lnkInicio').click(function(evt) {
     evt.preventDefault(); //to prevent from appending hash to url
     $('html, body').animate({
       'scrollTop':   $('#perfil').offset().top
     }, 2000);
});

谢谢！它帮助了我。这就是解决办法D