Javascript 导航栏立即跳到顶部

编辑：我很抱歉，这似乎是一个离线托管网站的问题。将所有内容转移到域后，我遇到的问题不再是问题。尽管它确实提出了这样一个问题：为什么它会通过同一个浏览器错误地加载，将所有文件保存在桌面上的一个文件夹中，而不是通过主机运行

我有一个很奇怪的问题，我正试图开发一个网站。每当我对页面进行一次更改时，大约75%的时间在尝试加载页面时，导航栏就会出错。除非您在浏览器上按两次“最大化窗口”按钮，否则导航栏将不再保留其预期位置，并在滚动时立即跳到顶部。在按下“最大化窗口”按钮两次后，无论何时尝试此操作，它都可以正常工作。这是我目前使用的HTML、CSS和JS。请随意忽略我笔记标签中的讽刺，以及页面大部分不完整的事实。我只是想在继续之前解决一些问题

HTML:

JS:

jQuery（文档）.ready（函数（）{
//定义变量
var navOffset，scrollPos=0；
//添加用于定位的实用工具包装器元素
jQuery（“nav”）.wrap（“”）；
jQuery（“nav”）。wrapInner（“”）；
jQuery（“.nav-inner”）.wrapInner（“”）；
//用于在页面加载和窗口大小调整时运行的函数
函数stickyUtility（）{
//仅在当前未使用固定位置时更新navOffset
如果（！jQuery（“nav”）.hasClass（“固定”））{
navOffset=jQuery（“nav”）.offset（）.top；
}
//将匹配高度应用于导航包装div，以避免内容跳转
jQuery（“.nav占位符”）.height（jQuery（“nav”）.outerHeight（））；
}//end stickyUtility函数
//在页面加载时运行
粘性效用（）；
//运行时调整窗口大小
jQuery（窗口）.resize（函数（）{
粘性效用（）；
});
//滚动运行事件
jQuery（窗口）.滚动（函数（）{
scrollPos=jQuery（窗口）.scrollTop（）；
如果（滚动位置>=导航偏移）{
jQuery（“nav”）.addClass（“固定”）；
}否则{
jQuery（“nav”）。removeClass（“固定”）；
}
});
});

提前谢谢大家,

---

Shadowfang

您尚未在href中指定目标链接

<li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>

href=“#”中的“#”符号没有指定id名称，但在页面顶部有相应的位置。使用href=“#”单击锚定会将滚动位置移动到顶部

---

这就是为什么它会立即跳到顶部。您必须指定链接指向用户的位置。

您能提供一个JSFIDLE吗？不过，我要警告你，在操场上似乎根本不起作用。但是当在浏览器中加载代码时，它工作得很好，除了最大化的问题。将jQuery作为外部库添加到JSFIDLE中，它似乎工作得很好-我遗漏了什么吗？不，你什么都有。也许这是Chrome的问题？这些文件中的每一个都被保存到记事本++文档中，并通过浏览器以这种方式打开。我刚刚从列表中完全删除了锚定标记，它仍在这样做。如果你是这么想的，我不会点击导航栏。问题是在页面加载时，向下滚动“一次单击”后，它有大约75%的机会将导航栏强制到页面顶部。但在按下浏览器上的“最大化”按钮两次后，它会自行修复，并按预期变成粘性导航栏。

html {
    padding: 0;
    margin: 0;
    background-color: #000;
}

body {
    font-family: Helvetica, sans-serif;
    font-size: 93%;
    line-height: 1.5em;
    padding: 40px 0;
    margin: 0;
}

a,
a:link,
a:visited {
    color: blue;
}

h1, h2, h3, h4, h5, h6 {margin-top: 0;}

p {margin: 0 0 1em 0;}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

h1 {
    background-color: #305782;
    color: #FFF;
    padding: 60px 25px;
    margin: 0;
}

nav {
    z-index: 500;
    background-color: #e7ecf2;
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
}

.fixed .nav-inner {
    padding: 0 20px;
}

.fixed .nav-inner-most {
    max-width: 100%;
    margin: 0 auto;
    background-color: #e7ecf2;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
}

nav ul li a:link,
nav ul li a:visited {
    display: block;
    text-decoration: none;
    padding: 10px 25px;
    background-color: #000;
    border: 2px solid #7d0000;
    color: #7d0000;
    font-size: 90%;
    font-weight: bold;
}

nav ul li a:hover {
    background-color: #28bfa1;
    color: #FFF
}

/* This seems to have an undesired effect, but may be necessary for later.
   The border-right: none; attribute is especially annoying...

nav ul li:last-child a:link,
nav ul li:last-child a:visited {
    border-right: none;
}

*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

jQuery(document).ready(function() {

    // define variables
    var navOffset, scrollPos = 0;

    // add utility wrapper elements for positioning
    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery("nav").wrapInner('<div class="nav-inner"></div>');
    jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

    // function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery("nav").hasClass("fixed")) {
            navOffset = jQuery("nav").offset().top;
        }

        // apply matching height to nav wrapper div to avoid awkward content jumps
        jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    } // end stickyUtility function

    // run on page load
    stickyUtility();

    // run on window resize
    jQuery(window).resize(function() {
        stickyUtility();
    });

    // run on scroll event
    jQuery(window).scroll(function() {

        scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }

    });

});

<li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>