Jquery 平滑页面滚动的实现？_Jquery_Html_Css

Jquery 平滑页面滚动的实现？

jquery html css

Jquery 平滑页面滚动的实现？,jquery,html,css,Jquery,Html,Css,我正在尝试实现一个很好的效果，称为平滑页面滚动和放松效果。我按照本教程中的说明进行操作：我想做的只是能够从导航栏点击其中一个链接，这将使我的页面垂直滚动（很好地）到确切的位置，但它不起作用希望你们能帮忙！提前感谢平滑页面滚动家这里有一些文字关于这里有一些文字服务这里有一些文字画廊这里有一些文字接触电邮：webmaster@yahoo.com JSFIDLE的主要问题似乎是没有包含jQuery UI，并且您的部分缺少ID。除此之外，你的剧本没有问题看看

我正在尝试实现一个很好的效果，称为平滑页面滚动和放松效果。我按照本教程中的说明进行操作：

我想做的只是能够从导航栏点击其中一个链接，这将使我的页面垂直滚动（很好地）到确切的位置，但它不起作用

希望你们能帮忙！提前感谢


平滑页面滚动







家
这里有一些文字
关于
这里有一些文字
服务
这里有一些文字
画廊
这里有一些文字
接触
电邮：webmaster@yahoo.com

JSFIDLE的主要问题似乎是没有包含jQuery UI，并且您的部分缺少ID。除此之外，你的剧本没有问题

看看：


平滑页面滚动







家
这里有一些文字
关于
这里有一些文字
服务
这里有一些文字
画廊
这里有一些文字
接触
电邮：webmaster@yahoo.com

使用

检查，您在锚定标记和部分中映射ID的方式有问题，我建议使用这种方法：这不是我的脚本。我只是用它来学习。所以我尝试在这里实现平滑的页面滚动。我对web开发非常陌生，所以我试图弄清楚不同的概念是如何工作的。你在JS方面有很多麻烦。例如，fiddle中不包括smoothpagescrolling.js，JQuery也不包括。节id与链接不对应。。。。请开始修小提琴看看：@sdespont:谢谢你给我指出了正确的方向。我从mh html中删除了jquery的链接，因为它不工作，所以我认为它有smtng错误。谢谢。那么，只有身份证才是问题所在？如果还有更多，我想知道。我的目标是理解代码是如何工作的，而不仅仅是复制它。谢谢你的帮助！是的，

ids

是唯一的问题：）我建议您编写代码，阅读和查看不会帮助您理解。即使你从互联网上获得代码，也要一次又一次地删除并编写代码的每一行：）好的。这听起来是一个提高我技能的聪明方法。我一直想改进我的学习过程。谢谢你的忠告！非常感谢。我将仔细检查您的脚本，并注意您所做的更改。如何包含jquery UI？我应该在html的什么地方添加链接？我以前添加过，但没有成功。也许我的链接错了？你应该像包含jquery一样包含它。在JSFIDLE上，您需要选中该框，但在您自己的站点上，您需要链接到该框。无论是在本地还是使用谷歌，我都已经在这段时间内找到了答案。事实上，我第一次就包含了正确的链接，但却包含在错误的html文档中，因为我同时打开了太多的文档。我的床。无论如何，谢谢你。非常感谢你的帮助！

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Page Scrolling</title>
        <script type='text/javascript' src='smoothpagescrolling.js'></script>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
    <header>
        <a href="#" id="logo">Logo</a>
                    <ul id="nav" class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
    </header>

<section id="hero1" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Home</h1>
    <p>Some text here!</p>
    </div>
  </div>
</section>

<section class="content">
  <div class="inner">
    <div class="copy">
    <h1>About</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="hero2" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Services</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section class="content">
  <div class="inner">
    <div class="copy">
    <h1>Gallery</h1>
      <p>Some text here... </p>
    </div>
  </div>
</section>

<section class="newsection">
    <h1>Contact</h1>
    <p>E-mail: webmaster@yahoo.com</p>
</section>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Smooth Page Scrolling</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <body>
    <header>
        <a href="#" id="logo">Logo</a>
                    <ul id="nav" class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
    </header>

<section id="hero1" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Home</h1>
    <p>Some text here!</p>
    </div>
  </div>
</section>

<section id="about" class="content">
  <div class="inner">
    <div class="copy">
    <h1>About</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="services" class="hero">
  <div class="inner">
    <div class="copy">
    <h1>Services</h1>
    <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="gallery" class="content">
  <div class="inner">
    <div class="copy">
    <h1>Gallery</h1>
      <p>Some text here... </p>
    </div>
  </div>
</section>

<section id="contact" class="newsection">
    <h1>Contact</h1>
    <p>E-mail: webmaster@yahoo.com</p>
</section>

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    </body>
</html>

window.scrollTop($('div.element').offset().top);