Question

我在实施 One Page Nav 和 scrollTo jQuery插件方面遇到了问题（似乎我需要更多声望来发布链接，所以我希望你知道哪个插件我指的是）。我是Javascript的完全初学者，我只想让导航栏的链接具有滚动效果as seen here。

我已经粘贴了下面我的html页面的全部代码，因为我不确定我哪里出错了。现在我已经从这两个插件中留下了准备好的功能（虽然我只试过一个 - 并且还尝试将它附加到＆＃39; div＃nav＆＃39;，＆＃39; #navbar＆＃39;等等。）。

    <html>

    <head>

        <meta charset="utf-8">

        <title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>

        <link rel="icon" type="image/png" href=""><!--favicon-->

        <meta name="description" content=""><!--description that appears under Google listing-->

       <meta name="keywords" content="">

       <meta name="robots" content="">

       <link rel="stylesheet" type="text/css" href="css/stylesheet.css">

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
       <script src="js/jquery.scrollTo.js"></script>
       <script src="js/jquery.nav.js"></script>

   </head>

    <body>

    <div id="header">

        <div class="container">

            <div id="navbar">

                <div id="logo"><img src="images/logo.png"></div>

                    <ul id="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>

            </div><!--navbar-->  

        </div><!--container-->

    </div><!--header-->

    <div id="home">

        <div class="background">

            <div class="container">


            </div><!--container-->

        </div><!--background-->

    </div><!--home-->

    <div id="about">

        <div class="background">

            <div class="container">


            </div><!--container-->

        </div><!--background-->

    </div><!--about-->

    <div id="portfolio">

        <div class="background">

            <div class="container">


            </div><!--container-->

        </div><!--background-->

    </div><!--portfolio-->

    <div id="contact">

        <div class="background">

            <div class="container">


            </div><!--container-->

        </div><!--background-->

    </div><!--contact-->

    $(document).ready(function() {
  $('#nav').onePageNav();
});

$(document).ready(function() {
  $('#nav').$scrollTo();
});

</body>

</html>

Answer 1

jQuery的开场<script>和结束</script>标记在哪里？

<强>更新：

为什么要两次声明$(document).ready？

    $(document).ready(function() {
      $('#nav').onePageNav();
      $('#nav').scrollTo();
    });

Answer 2

您无需使用Jquery滚动顶部。您可以在window对象

上使用它

  window.scrollTo(0,0);

但是如果您想要动画或想要对特定元素执行滚动，那么您可以使用jquery

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

在您的代码中，您必须在<script></script>标记内编写javascript代码。拼写错误为scrollTo而非$scrollTo

返回页首链接

HTML 的

 <a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>

CSS

.btn-go-top {
    position:fixed;
    bottom: 20px;
    right: 20px;
}

无法使scrollTo jQuery效果起作用

2 个答案: