testeBotao是我的主播ID。

Question

首先，抱歉我的英语不好，我不是英语母语人士。其次，我真的在Jquery开始，我在很多论坛上都在寻找它。

因此...

我有一个html，css和JS文件。

所以，我想这样做：当我点击锚点时，动画（跳转）到div。

我正在尝试此代码：

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

但它不起作用。

testeBotao是我的主播ID。

perfil是我的div id。

看看这个：当我使用它时它可以工作，但是当页面被创建时：

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

我想把它点击锚点击＆＃34;事件＆＃34;。

我做错了什么？

为了简化，这是我的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>

Answer 1

您的选择器#lnkInicio周围缺少引号：

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

跳转页面与动画 - 菜单到div

testeBotao是我的主播ID。

perfil是我的div id。

1 个答案: