Javascript Href'；s具有ID'；s滚动至Div'；但是它'；It’他跳过了这一部分

这个项目是一个网站，它的所有页面/部分都在一个页面中。我已经为每个部分（sectio1、section2、section3等）分配了ID，并且我还在顶部导航href中分配了这些部分，例如

。因此，当您从顶部导航单击“关于我们”时，它会将您带到ID为

#section2

的Div

我把这部分做对了，但是我遇到了一些问题——我已经研究过了，但我不知道找到解决方案的关键词！所以我什么也没发现，任何帮助都将不胜感激

1） 当点击菜单中的按钮时，它会跳到指定的部分，但实际上它不会跳到该部分的顶部-就像向下滚动到100px一样？！为什么它会这样做

2） 是否有任何方法可以使其平滑滚动而不跳跃

3） 有没有一种简单的方法可以使按钮在单击并滚动到其分区时激活class

这里是小提琴：这里是HTML&CSS

---

事实上，有一个小脚本可以帮你做到这一点

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

$（文档）.ready（函数（）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（'html'，'body'）；
$（'a[href*=#]'）。每个（函数（）{
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
var$target=$（this.hash），target=this.hash；
如果（目标）{
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
event.preventDefault（）；
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
location.hash=目标；
});
});
}
}
});
//使用第一个“可滚动”的元素
函数可滚动元素（els）{
对于（var i=0，argLength=arguments.length；i.
来说，非常感谢！但是，如何使单击的链接具有class.active？并且它仍然会裁剪一些页面部分，请在此处查看live：
body {
    background-color: #FFFFFF;

    line-height: 125%;
    text-align: center;  
    overflow-x: hidden;

    -webkit-text-size-adjust: none;
    -webkit-overflow-scrolling: touch;  
}

/*Font Face*/
@font-face { font-family: Comfortaa; src: url('Comfortaa-Light.ttf'); } 
@font-face { font-family: Comfortaa; font-weight: bold; src: url('Comfortaa-Bold.ttf');}
/*Fonts*/h1, h2, h3, h4, h5, h6, p, pre, a, ol, li, span, label, blockquote, figcaption, abbr, td, input, textarea {
    font-family: Comfortaa, sans-serif; 
    font-size: 15px;
    color: #636363;
}

h1 {
    font-size: 26px;
    line-height: 120%;
    font-weight: bold;
}

h2 {
    font-size: 26px;
    line-height: 120%;
    font-weight: bold;
}

h3 {
    font-size: 20px;
    font-weight: bold;
}

small {
    font-size: 13px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic; 
}

img {
    display: block;
}


/*MAIN/////////////////////////////////////////////////////////////////////*/   
/*Main Page*/#Page {    
    width: 100%;
    position: relative; 
    margin-top: 103px;
    overflow: hidden;
}

/*Wrappers*/.wrapper, .wrapperA, .wrapperB, .contactSectionWrapper { width: 100%; overflow: hidden; }

    .wrapper {
        background-color: #FFFFFF;
    }

    .wrapperA {
        background-color: #F58221;
    }

    .wrapperB {
        background-color: #23408E;
    }

/*Content Container*/.content {
    width: 1030px;
    padding: 0 20px;
    margin: auto;   
    overflow: hidden;
}


/*HEADER///////////////////////////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
    background-color: #ffffff;
    width: 100%;
    position: fixed; 
    top: 0; left: 0; 
    z-index: 1000;

    -webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
}

/*Header Content Container*/#headerContent {
    width: 1030px;
    padding: 10px 20px;
    margin: auto;   
    overflow: auto;
}

/*Header Logo*/#headerLogo {
    width: 300px;
    float: left;
}

/*Main Menu*/#mainMenu {
    margin-top: 20px;
    float: right;
}

    #mainMenu li {
        float: left;
    }

    #mainMenu a {
        color: #F58221;

        padding: 10px 15px;
        margin-left: 5px;

        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        -webkit-transition: background 0.1s linear;
        -moz-transition: background 0.1s linear;
        -ms-transition: background 0.1s linear;
        -o-transition: background 0.1s linear;
        transition: background 0.1s linear;
    }

    #mainMenu a:hover {
        color: #23408E; 
    }   

    #mainMenu a.active {
        color: #7E7E7E;
        background-color: #FAFAFA;
        cursor: default;
    }

/*Tablet & Phone Header (Hidden From Widescreen's)*/
.secondHeader-menuButton, #secondHeader, #logo-smallScreen {
    display: none;
}



/*FOOTER////////////////////////////////////////////////////////////////////*/  
/*Footer Section*/
#footer {
    border-top: 1px solid #192E66;
    background-color: #23408E;
    width: 100%;
}

#footerContent {
    width: 1030px;
    padding: 20px;
    margin: auto;   
    overflow: hidden;
}

    #footerContent * {
        color: #FFFFFF;
        font-size: 13px;
    }



/*PAGES////////////////////////////////////////////////////////////////////*/   
/*About Page*/  
#home-sectionB {
    position: relative;
}

    #home-sectionB-textbox1 {
        width: 500px;
        max-width: 100%;

        position: absolute;
        bottom: 135px;
        right: 50px;

        text-align: justify;
    }

        #home-sectionB-textbox1 p, h3 {
            color: #FFFFFF;
        }



/*Portfolio Page*/  
#home-sectionC {
    padding-bottom: 50px;
}

    #portfolioGallery * {
        color: #FFFFFF;
    }

#portfolioGallery .item {
    border: 1px dashed #FFFFFF;
    width: 310px; height: 250px;
    float: left;
    margin: 5px;
    overflow: hidden;
    cursor: pointer;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

    #portfolioGallery .item div {
        background-color: #23408E;  
        width: 100%; height: 100%;
        padding: 100px 20px 20px 20px;
    }

    #portfolioGallery .item img {
        max-width: 380px; 
    }

        #portfolioGallery .item:hover > img {
            display: none;
        }



/*Endorsements*/    
#home-sectionD {
    padding-top: 50px;
}

.home-sectionD-textbox * {
    color: #FFFFFF;
}

.home-sectionD-textbox {
    padding: 30px;
    text-align: left;
    clear: both;
}

    .home-sectionD-textbox:last-of-type {
        padding: 30px 30px 0 30px;
    }

    .home-sectionD-textbox:before {
        content: url('../elements/quote.png');
        padding-right: 20px;
        float: left;
    }



/*Contact Page*/
.contactSectionWrapper {
    background-color: #FFFFFF;
    background-image: url('../elements/strip.png');
    background-repeat: repeat-x;
    background-position: top;
    padding: 50px 0;
}

#contactSection h2 {
    padding-top: 50px;
    color: #F58221;
    font-size: 50px;
}

#grid1 {
    width: 40%;
    vertical-align: middle;
    display: inline-block;
    margin-left: -2px;
    padding: 50px 0;
}

#grid2 {
    width: 60%;
    vertical-align: middle;
    display: inline-block;
    margin-left: -2px;
    padding: 0 0 0 50px;    
}

    #contactForm label{
        color: #23408E;
        display: block;
        padding: 10px 0;
        text-align: left;
    }

    #contactForm input, 
    #contactForm textarea {     
        width: 100%;
        display: block;
        padding: 10px 10px;
        margin-bottom: 15px;

        text-align: left;
        outline: none;

        border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    #contactForm textarea{
        resize: vertical;
    }

    #submit{
        color: #FFFFFF;
        background: #23408E;
        border: none;

        width: 100%;
        padding: 10px 10px;

        cursor: pointer;
        font-size: 15px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }   

    #submit:hover, 
    #submit:active {
        background: #F58221;
    }   

.notSelected {
    color: #B2B2B2;
    border: 1px solid #23408E;
}

.selected {
    color: #F58221;
    border: 1px solid #F58221;
}

#contact-info {
    padding-top: 40px;
}

/*Social Media Icons*/
.socialbar {
    padding-top: 5px;
    display: inline-block;
    cursor: default;
}

    .icons a {
        background-image:url("../elements/socialmediaicons.png");
        background-repeat: no-repeat;
    }

    .icons a {
        display: inline-block;
        height: 40px;
        width: 40px;
    }

        .icons a span {
            display: none;
        }

    .icons a.facebook { background-position: 0 -160px; }
    .icons a.facebook:hover { background-position: 0 -200px; }

    .icons a.linkedin { background-position: 0 -720px; }
    .icons a.linkedin:hover { background-position: 0 -760px; }

    .icons a.twitter { background-position: 0 -1520px; }
    .icons a.twitter:hover { background-position: 0 -1560px; }  

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});