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

我正在尝试链接导航栏列表项，以将滚动切换到页面上的特定面板。调整CSS使所有面板背景（

.maincontent

）100%页面宽度后，滚动效果不再有效

CSS:

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*/

});

jQuery（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>=850）{
$（“.nav”）.show（）；
}
else{$（“.nav”）.hide（）；}
});
$（“#切换菜单”）。单击（函数（）{
$（this）.toggleClass（'menu-is-active'）
});
/*单击导航外部以触发导航图标动画*/
$（文档）。单击（函数（）{
$（“#切换菜单”）.removeClass（）；
});
$（“导航”）。单击（功能（e）{
e、 停止传播（）；
返回false；
});
/*----/----导航图标动画*/
/*切换菜单*/
jQuery（“切换菜单”）。单击（函数（）{
jQuery（“.nav”）.slideToggle（）；
});
/*单击导航外部以关闭切换*/
$（文档）。单击（函数（）{
如果（$（窗口）.width（）<850）{
$（“.nav”）.hide（）；
}否则{
$（“.nav”）.show（）；
}
});
$（“#切换菜单”）。单击（功能（e）{
e、 停止传播（）；
返回false；
});
/*----/----切换菜单*/
/*跳转卷轴*/
$（函数（）{
变量$window=$（窗口），$document=$（文档），
transitionSupported=typeof document.body.style.transitionProperty==“string”//检测CSS转换支持
scrollTime=1；//以秒为单位滚动时间
$（文档）。在（“单击”，“a[href*=#]：not（[href=#]）”上，函数（e）{
var目标、可用、滚动、deltaScroll；
if（location.pathname.replace（/^\/，“”））==this.pathname.replace（/^\/，“”）和&location.hostname==this.hostname）{
target=$（this.hash）；
target=target.length？目标：$（“[id=“+this.hash.slice（1）+”]）；
if（目标长度）{
avail=$document.height（）-$window.height（）；
如果（有效值>0）{
滚动=target.offset（）.top；
如果（滚动>可用）{
滚动=有效；
}
}否则{
滚动=0；
}
deltaScroll=$window.scrollTop（）-scroll；
//如果我们不必滚动，因为我们已经处于正确的滚动级别，
如果（！deltaScroll）{
return；//什么也不做
}
e、 预防默认值（）；
如果（支持转换）{
$（“html”）.css({
“保证金顶部”：deltaScroll+“px”，
“转换”：scrollTime+“s ease in-out”
}).数据（“转换”，滚动）；
}否则{
$（“html，body”）.stop（true，true）//停止可能的其他jQuery动画（假设只有我们这样做）
.制作动画({
scrollTop:滚动+“px”
}，滚动时间*1000）；
返回；
}
}
}
});
如果（支持转换）{
$（“html”）。在（“transitionend WebKittTransitionEnd msTransitionEnd oTransitionEnd”函数（e）上{
变量$this=$（this），
滚动=$this.data（“转换”）；
if（e.target==e.currentTarget&&scroll）{
$this.removeAttr（“样式”）.removeData（“转换”）；
$（“html，正文”）.scrollTop（滚动）；
}
});
}
});
/*----/----跳转卷轴*/
/*联系让我知道*/
jQuery（“.letmeknow”）。单击（函数（）{
jQuery（“.container”）.slideToggle（）；
});
/*----/-----联系让我知道*/
});

HTML:

1.
作品标题1

作品标题2

作品标题3

作品标题4
作品标题5

作品标题6

 喜欢我的工作吗？

给我留言

谢谢你的留言

社会的

©2015 thiswebsite.com

这是由于提供了

.maincontent

绝对定位。这使得

html

不是文档的完整高度。脚本依赖于此进行转换。因此，这里需要做一些更改：

从

正文

（旁注）中选取点：

删除此处的定位：

.maincontent {
  width: 100%;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

然后在此元素上调整框大小以删除水平滚动条：

.panel {
  width: 100%;
  background: #000000;
  color: #ffffff;
  height: 40em;
  padding: 3em;
  box-sizing: border-box;
}

---

您的浏览器控制台中有任何错误吗？特别是在点击导航项目后。很高兴伸出援手。：-）

.body {
  ...
}

.maincontent {
  width: 100%;
  font-size: 1.05em;
  font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}

.panel {
  width: 100%;
  background: #000000;
  color: #ffffff;
  height: 40em;
  padding: 3em;
  box-sizing: border-box;
}