导航栏立即跳到顶部

时间:2017-01-29 20:24:06

标签: javascript jquery html css

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

对于我正在努力开发的网站,我有一个相当奇怪的问题。每当我对页面进行一次更改时,大约75%的时间在尝试加载它时,导航栏就会出错。除非您在浏览器上点击“最大化窗口”按钮两次,否则导航栏不再保留其预期定位并在滚动时立即跳到顶部。任何时候你按下最大化窗口按钮两次后尝试它,它可以毫无障碍地工作。这是我当前的HTML,CSS和JS。随意忽略我的笔记标签中的讽刺,以及页面大部分不完整的事实。我只想在按下之前解决一些问题。

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>The Den</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  <link rel="stylesheet" media="screen, projection" href="style.css">
  <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type ="text/javascript" src="script.js"></script>
</head>

<body>
    <!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
    <div class="status"></div>
    <div class="container"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->         
        <center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>

        <!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
        <nav>
            <ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
                <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>
            </ul>
        </nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->

        <br/><br/>
        <h2>TEXT TEST FOR TESTING TEXT</h2> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->

        <p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>

    </div>  

CSS:

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; }

JS:

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");
        }

    });

});

提前谢谢你,

影牙

1 个答案:

答案 0 :(得分:0)

您尚未在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>

&#39;#&#39; href =&#34;#&#34;中的符号没有指定ID名称,但确实有相应的位置 - 页面顶部。用href =&#34;#&#34;将滚动位置移到顶部。

这就是它立即跳到顶端的原因。您必须指定链接引导用户的位置。