Animate Scroll JS函数错误

时间：2016-10-22 20:33:24

标签： javascript scroll jquery-animate

我有两个版本的单页面网站使用JS .animate函数滚动。一个站点不会滚动而另一个站点会滚动。我在“破损”网站上的代码中找不到错误。

非常感谢任何帮助。 其他“有用”的评论也欢迎。

先谢谢你。

Working Site 

$(document).ready(function() {
    setBindings();
});

//Allow screen to Scroll to selected section
function setBindings() {
    $("nav a").click(function (tip) {
        tip.preventDefault();
        var sectionID = "#" + tip.currentTarget.id + "Sect";

        //alert('button id ' + sectionID);
        $("html body").animate({
            scrollTop: $(sectionID).offset().top
        }, 1000);
    });
}
h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 20px;
}

nav {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: black;
    background-color: hsla(0, 0%, 0%, 0.50);
    /* Set nav bar on top of all elements */
    z-index: 99;
    text-align: left;
}

nav a {
    text-decoration: none;
    color: #fff;
    margin-left: 30px;
    line-height: 50px;
}

.sect {
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.subsection {
    height: 100%;
    background-color: bisque;
}

.navSpace {
   margin-top: 90px;
   margin-left: 0;
   height: 100%;
   border-radius:6px;
}

#homeSect {
    background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
    color:black;
    color: hsl(240, 0%, 30%);
}

#productSect {
    /*Place Holder*/
    background-color: bisque;
}

#servicesSect {
    background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg');
}

#portfolioSect {
    /*Place Holder*/
    background-color: bisque;
}

#contactSect {
    background-image: url('http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg');
}

html, body {
    height: 100%;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head>

 <nav>
        <a id="home" href="#homeSect">HOME</a>
        <a id="product" href="#productSect">PRODUCT</a>
        <a id="services" href="#servicesSect">SERVICES</a>
        <a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
        <a id="contact" href="#contactSect">CONTACT</a>
    </nav>

    <div class="sect" id="homeSect">
        <div class="container">
            <div class="jumbotron">
                <div class="row text-center">
                    <div class="col-xs-12">
                        <h1>Frank's Promo Page</h1>
                    </div>
                </div>
                <p class="text-center">This is where I want to talk about my company and why we are great.</p>
            </div>
        </div>
    </div>

    <div class="subsection" id="productSect">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 navSpace">
                    <div class="col-md-12 well">
                        <h2>Data Analyses</h2>
                        <h4 class="lead">
                            Find the answers to complex questions hidden inside your own proprietary data
                        </h4>
                    </div>
                </div>
                <div class="col-md-4 navSpace">
                    <div class="col-md-12 well">
                        <h2>Front End Web Design</h2>
                        <h4 class="lead">
                            Build a professional clean design for your company<br />
                            Maintain and refine your current website.
                        </h4>
                    </div>
                </div>
                <div class="col-md-4 navSpace">
                    <div class="col-md-12 well">
                        <h2>Visual Basic for Applications Programming</h2>
                        <h4 class="lead">
                            Design and maintian custom built applicaton for:<br />
                            Word, Excel, Access, Outlook, Power Point, etc.
                        </h4>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="sect" id="servicesSect"></div>

    <div class="subsection" id="portfolioSect"></div>

    <div class="sect" id="contactSect"></div>

破碎的网站 

$(document).ready(function() {
  setBindings();
});


//Allow screen to Scroll to selected section
function setBindings() {
  $("nav a").click(function(tip) {
    tip.preventDefault();
    var sectionID = "#" + tip.currentTarget.id + "Sect";
    //alert('button id ' + sectionID);

    $("html body").animate({
      scrollTop: $(sectionID).offset().top
    }, 1000);
  });
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 20px;
}
nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: black;
  background-color: hsla(0, 0%, 0%, 0.50);
  /* Set nav bar on top of all elements */
  z-index: 99;
  text-align: left;
}
nav a {
  text-decoration: none;
  color: #fff;
  margin-left: 30px;
  line-height: 50px
}
.sect {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.subsection {
  height: 100%;
  background-color: bisque;
}
.navSpace {
  margin-top: 90px;
  margin-left: 0;
  height: 100%;
  border-radius: 6px;
}
#homeSect {
  background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475940094/Promo/DTP3sm_rxk8pb.jpg);
  color: black;
  color: hsl(240, 0%, 30%);
}
#aboutSect {
  /*Place Holder*/
  background-color: bisque;
}
#portfolioSect {
  /*Place Holder*/
  background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1471796677/Promo/tileable-dark-wood-textures-8_e6gwz7.jpg);
}
#contactSect {
  background-image: url(http://res.cloudinary.com/data-detective/image/upload/v1475937593/Promo/nate3_y8bwcs.jpg);
}
html,
body {
  height: 100%;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Frank Promo</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="Content/StyleSheet.css" rel="stylesheet" />
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <link href="Content/bootstrap-theme.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <script src="Scripts/jquery-3.1.0.js"></script>
  <script src="Scripts/JavaScript.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>

</head>

<body>
  <!--style="margin:0 5px";-->

  <nav>
    <a id="home" href="#homeSect">HOME</a>
    <a id="about" href="#aboutSect">ABOUT</a>
    <a id="portfolio" href="#portfolioSect">PORTFOLIO</a>
    <a id="contact" href="#contactSect">CONTACT</a>
  </nav>

  <div class="sect" id="homeSect">
    <div class="container-fluid">
      <div class="jumbotron navSpace">
        <div class="row text-center">
          <div class="col-xs-12">
            <h1>Frank's Promo Page</h1>
          </div>
        </div>
        <p class="text-center">This is where I want to talk about my company and why we are great.</p>
      </div>
    </div>
  </div>

  <div class="subsection" id="aboutSect">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 navSpace">
          <div class="col-md-12 well">
            <h2>Data Analyses</h2>
            <h4 class="lead">
                            Find the answers to complex questions hidden inside your own proprietary data
                        </h4>
          </div>
        </div>
        <div class="col-md-4 navSpace">
          <div class="col-md-12 well">
            <h2>Front End Web Design</h2>
            <h4 class="lead">
                            Build a professional clean design for your company<br />
                            Maintain and refine your current website.
                        </h4>
          </div>
        </div>
        <div class="col-md-4 navSpace">
          <div class="col-md-12 well">
            <h2>Visual Basic for Applications Programming</h2>
            <h4 class="lead">
                            Design and maintian custom built applicaton for:<br />
                            Word, Excel, Access, Outlook, Power Point, etc.
                        </h4>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="sect" id="portfolioSect"></div>

  <div class="sect" id="contactSect"></div>

</body>

</html>

0 个答案:

没有答案
相关问题
最新问题