将CSS面板更改为100%宽度会创建跳跃的jQuery滚动

我正在尝试链接导航栏列表项，以将滚动转移到页面上的特定面板。在对CSS进行调整以使所有面板背景（.maincontent）100%页面宽度后，滚动效果不再有效。。。

CSS：

/****Landscape****/
/*global styles*/
.body {
  width: 100%;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
  appearance: none;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
  background: transparent;
  color: #000000;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  list-style: none;
  text-decoration: none;
}
a:focus,
a:hover {
  color: #e6e8eb;
  cursor: pointer;
  transition: color 0.5s ease;
  width: inherit;
  right: 0;
  left: 0;
}
a:active {
  color: #484747;
}
/*----/----global styles*/
/*Maincontent*/
.maincontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
/*----/----Maincontent*/
/*contact panel*/
.letmeknow:hover {
  color: #464c4c;
  cursor: pointer;
  transition: color 0.5s ease;
}
.letmeknow {
  appearance: none;
  width: 80%;
  height: 50px;
  font-size: 1.05em;
  background: transparent;
  color: #e6e8eb;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  outline: none;
  border: none;
}
/*Contact submit Form*/
#container {
  width: 840px;
  margin: 25px auto;
}
.whysign {
  float: left;
  background-color: white;
  width: 480px;
  height: 347px;
  border-radius: 0 5px 5px 0;
  padding-top: 20px;
  padding-right: 20px;
}
.signup {
  float: left;
  width: 300px;
  padding: 30px 20px;
  background-color: white;
  text-align: center;
  border-radius: 5px 0 0 5px;
}
[type=text] {
  display: block;
  margin: 0 auto;
  width: 80%;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  height: 45px;
  line-height: 45px;
  margin-bottom: 10px;
  font-size: 1em;
  color: rgba(0, 0, 0, .4);
}
input[type="submit"] {
  appearance: none;
  width: 80%;
  height: 50px;
  font-size: 1.05em;
  background: transparent;
  color: #e6e8eb;
  border: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.5s ease;
  outline: none;
  border: none;
}
input[type="submit"]:hover {
  color: #464c4c;
  cursor: pointer;
  transition: color 0.5s ease;
}
[type='text']:focus {
  outline: none;
  border-color: #53CACE;
}
span:hover {
  color: #53CACE;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
  background: #ffffff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.nav {
  background: #ffffff;
  float: right;
  text-align: right;
}
.nav > li {
  display: inline-block;
  padding: 2px;
  padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
  width: 100%;
  background: #000000;
  color: #ffffff;
  height: 40em;
  padding: 3em;
}
.links {
  color: #ffffff;
}
.panel .inner {
  padding-top: 10%;
  color: #df
}
.panel.panel-blank {
  background: #ffffff;
  color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
  float: left;
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 18px;
  cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
@media (max-width: 850px) {
  /*global styles*/
  .body {
    width: 100%;
    margin: 0;
    list-style: none;
    text-decoration: none;
  }
  .header {
    background: #ffffff;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    display: none;
    background-color: #ffffff;
    left: 0;
    top: 39px;
  }
  .nav > li {
    postition: absolute;
    display: block;
    left: 0;
    width: 100%;
    padding-top: 0.6em;
    padding-bottom: 1em;
  }
  .nav > li:hover {
    postition: absolute;
    display: block;
    left: 0;
    width: 100%;
    padding-top: 0.6em;
    padding-bottom: 1em;
    cursor: pointer;
  }
  /*----/----global styles*/
  /*logo*/
  .logo {
    float: left;
    display: block;
    width: 15px;
    height: 15px;
    padding: 18px;
    cursor: pointer;
  }
  /*----/----logo*/
  /*navigation icon*/
  #toggle-menu {
    float: right;
    display: block;
    width: 15px;
    height: 15px;
    padding: 20px;
  }
  #toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
  }
  #toggle-menu span {
    display: block;
    width: 15px;
    height: 3px;
    background: black;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
  }
  #toggle-menu span.top {
    top: 0px;
  }
  #toggle-menu span.middle {
    top: 6px;
  }
  #toggle-menu span.bottom {
    top: 12px;
  }
  /*----/----navigation icon*/
  /*navigation icon animation*/
  #toggle-menu.menu-is-active span {
    -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
  }
  #toggle-menu.menu-is-active span.top,
  #toggle-menu.menu-is-active span.middle {
    top: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #toggle-menu.menu-is-active span.middle {
    opacity: 0;
  }
  #toggle-menu.menu-is-active span.bottom {
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /*----/----navigation icon animation*/
}
/*----/----Portrait*/

jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
     if ($(window).width() >=850) {
        $(".nav").show();
    }
    else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
    $(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
    $("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
    e.stopPropagation();
    return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
    jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
    if ($(window).width() < 850) {
        $(".nav").hide();
    } else {
        $(".nav").show();
    }
});
$("#toggle-menu").click(function (e) {
    e.stopPropagation();
    return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
    transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
    scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
    var target, avail, scroll, deltaScroll;
    if (location.pathname.replace(/^'//, "") == this.pathname.replace(/^'//, "") && location.hostname == this.hostname) {
        target = $(this.hash);
        target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
        if (target.length) {
            avail = $document.height() - $window.height();
            if (avail > 0) {
                scroll = target.offset().top;
                if (scroll > avail) {
                    scroll = avail;
                }
            } else {
                scroll = 0;
            }
            deltaScroll = $window.scrollTop() - scroll;
            // if we don't have to scroll because we're already at the right scrolling level,
            if (!deltaScroll) {
                return; // do nothing
            }
            e.preventDefault();
            if (transitionSupported) {
                $("html").css({
                    "margin-top": deltaScroll + "px",
                    "transition": scrollTime + "s ease-in-out"
                }).data("transitioning", scroll);
            } else {
                $("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
                .animate({
                    scrollTop: scroll + "px"
                }, scrollTime * 1000);
                return;
            }
        }
    }
});
if (transitionSupported) {
    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
        var $this = $(this),
            scroll = $this.data("transitioning");
        if (e.target === e.currentTarget && scroll) {
            $this.removeAttr("style").removeData("transitioning");
            $("html, body").scrollTop(scroll);
        }
    });
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(".letmeknow").click(function () {
    jQuery(".container").slideToggle();
});
/*----/-----contact let me know toggle*/
});

HTML:

<div class="header">
  <div class="navbar">
    <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a>
    <a id="toggle-menu">
      <div>
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
      </div>
    </a>
    <ul class="nav">
      <li><a href="" style="display: inline-block; width:100%;">Home</a></li>
      <li><a href="#panel9" style="display: inline-block; width:100%;">About</a></li>
      <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
      <li><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li>
    </ul>
  </div>
</div>
<div class="maincontent">
  <div class="panel multiplepanels" id="panel1">
    <div class="inner"> 1 </div>
  </div>
  <div class="panel panel-blank multiplepanels" id="panel2">
    <div class="inner">
      <p>Work Title 1</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel multiplepanels" id="panel3">
    <div class="inner">
      <p>Work Title 2</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel panel-blank multiplepanels" id="panel4">
    <div class="inner">
      <p>Work Title 3</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel multiplepanels" id="panel5">
    <div class="inner">
      <p>Work Title 4</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel panel-blank multiplepanels" id="panel6">
    <div class="inner">
      <p>Work Title 5</p> <a href="" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel multiplepanels" id="panel7">
    <div class="inner">
      <p>Work Title 6</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project  →</a> </div>
  </div>
  <div class="panel panel-blank multiplepanels" id="panel8">
    <div class="inner">
      <P>Like what I do?</P>
      <p><a href="#panel9" class="letmeknow" style="display: inline-block; width:100%;">Let me know</a></p>
      <div id='container'>
        <div class='signup'>
          <p> Send me a message </p>
          <form>
            <input type='text' placeholder='First:' />
            <input type='text' placeholder='Last:' />
            <input type='text' placeholder='Email:' />
            <input type='text' placeholder='Phone:' />
            <input type='submit' placeholder='SUBMIT' />
          </form>
        </div>
      </div>
      <div class="thank you">
        <p>Thank you for your message!</p>
      </div>
    </div>
  </div>
  <div class="panel multiplepanels" id="panel9">
    <div class="inner">
      <p>Social</p>
    </div>
  </div>
</div>
<footer>
  <div class="panel panel-blank" id="panel10">
    <div class="inner"> © 2015 thiswebsite.com</div>
  </div>
</footer>