无法使scrollTo jQuery效果正常工作

Question

I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). 我在实现“ 一页导航”和“ ScrollTo” jQuery插件时遇到了问题（似乎我需要更高的声誉才能发布链接，所以希望您知道我指的是哪个插件）。 I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here . 我是Java语言的完全初学者，我只希望导航栏的链接具有滚动效果，如此处所示。

I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. 我已经在下面粘贴了我的html页面的整个代码，因为我不确定我哪里出错了。 For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.). 现在，我已经从两个插件中保留了ready函数（尽管我只尝试了一个-并尝试将其附加到'div＃nav'，'＃navbar'等）。

    <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

Where is your opening <script> and closing </script> tag for the jQuery? jQuery的<script>和</script>标记在哪里？

Update : 更新：

Why declare $(document).ready twice? 为什么要两次声明$(document).ready ？

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

Answer 2

You do not need to use Jquery to scroll top. 您不需要使用Jquery滚动顶部。 You can use it on window object 您可以在window对象上使用它

  window.scrollTo(0,0);

But if you want to animate or want to perform scroll on specific element, then you can use jquery 但是，如果您想制作动画或要对特定元素执行滚动，则可以使用jquery

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

In your code, you have to write your javascript code inside <script></script> tag. 在您的代码中，您必须在<script></script>标记内编写JavaScript代码。 There is an spelling mistake of scrollTo instead of $scrollTo 有一个scrollTo而不是$scrollTo的拼写错误

Back To Top Link 返回页首链接

HTML HTML

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

CSS CSS

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

无法使scrollTo jQuery效果正常工作

问题描述

2 个解决方案

解决方案1
1 2014-04-22 10:55:03

解决方案2
0 已采纳 2014-04-22 10:56:51

无法使scrollTo jQuery效果正常工作

问题描述

2 个解决方案

解决方案1 1 2014-04-22 10:55:03

解决方案2 0 已采纳 2014-04-22 10:56:51

解决方案1
1 2014-04-22 10:55:03

解决方案2
0 已采纳 2014-04-22 10:56:51