javascript - 为什么我的 jscript 在单击 anchor 链接后开始出错

Question

我网站的 jscript 中有一个错误。重现它的方法是单击静态标题中的链接。多次单击链接后，在滚动时，你会在滚动时放置 anchor ，这真的很麻烦，滚动是无法忍受的。

我该怎么做才能解决这个问题？提前致谢

这是我的代码:

$(window).load(function(){
    
    $(window).scroll(function() {
        var hT = $('#scroll-to').offset().top,
        hH = $('#scroll-to').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
        if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
            $('#static-bar').addClass('view2')
        }
        else {
            $('#static-bar').removeClass('view2');
        }
    });
});

$(window).load(function() {
      
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
    
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
    
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    
    $(window).scroll(function (e) {
        var anchors = $('.selector');
        for (var i = 0; i < anchors.length; ++i) {
            if (isScrolledIntoView(anchors[i])) {
                var href = $(anchors[i]).attr('href');
                location.hash = href.slice(href.indexOf('#') + 1);
                break;
            }
        }
    });
    
    $(window).scroll(function () {
        if (window.location.href.indexOf("home") != -1)
        {
            document.querySelectorAll("#static-bar a[href='#home']")[0].setAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
        }
        if (window.location.href.indexOf("about") != -1)
        {
            document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#about']")[0].setAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
        }
        if (window.location.href.indexOf("services") != -1)
        {
            document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#services']")[0].setAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
        }
        if (window.location.href.indexOf("method") != -1)
        {
            document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#method']")[0].setAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#contact']")[0].removeAttribute("class", "dlines");
        }
        if (window.location.href.indexOf("contact") != -1)
        {
            document.querySelectorAll("#static-bar a[href='#home']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#about']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#services']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#method']")[0].removeAttribute("class", "dlines");
            document.querySelectorAll("#static-bar a[href='#contact']")[0].setAttribute("class", "dlines");
        }
    });

    $(function () {
        var hash = location.hash;
        if (hash) {
            // Scroll to the element with the given hash.
            var anchors = $('.selector');
            for (var i = 0; i < anchors.length; ++i) {
                if ($(anchors[i]).attr('href') === hash) {
                    $(window).scrollTop($(anchors[i]).offset().top);
                    break;
                }
            }
        }
    });   
});

function home() {
    document.querySelectorAll("a.link[href='#home']")[0].setAttribute("id", "home");
    document.querySelectorAll("a.link[href='#home']").removeAttr('id');
    document.querySelectorAll("a.link[href='#about']").removeAttr('id');
    document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function about() {
    document.querySelectorAll("a.link[href='#about']")[0].setAttribute("id", "about");
    document.querySelectorAll("a.link[href='#home']").removeAttr('id');
    document.querySelectorAll("a.link[href='#about']").removeAttr('id');
    document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function services() {
    document.querySelectorAll("a.link[href='#services']")[0].setAttribute("id", "services");
    document.querySelectorAll("a.link[href='#home']").removeAttr('id');
    document.querySelectorAll("a.link[href='#about']").removeAttr('id');
    document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function method() {
    document.querySelectorAll("a.link[href='#method']")[0].setAttribute("id", "method");
    document.querySelectorAll("a.link[href='#home']").removeAttr('id');
    document.querySelectorAll("a.link[href='#about']").removeAttr('id');
    document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}
function contact() {
    document.querySelectorAll("a.link[href='#contact']")[0].setAttribute("id", "contact");
    document.querySelectorAll("a.link[href='#home']").removeAttr('id');
    document.querySelectorAll("a.link[href='#about']").removeAttr('id');
    document.querySelectorAll("a.link[href='#services']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#method']")[0].removeAttr('id');
    document.querySelectorAll("a.link[href='#contact']")[0].removeAttr('id');
}

/*============== Font ==============*/

/*Raleway*/
@font-face {
	font-family: 'Raleway';
	src: url(../fonts/font.woff2) format('woff2');
}

/*Icons*/

@font-face {
	font-family:'FontAwesome';
	src: url('../fonts/iconfont.woff2');
}

/*========= Main Elements ==========*/

/*Html & Body*/

html, body {
    font-size: 14px;
    width: device-width;
	margin: 0 0 0 0;
    font-weight: 400;
    width: 100%;
    font-family: 'Raleway', sans-serif;
}

/*All*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

/*Links !a*/

a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
	outline: none;
}

/*Headers !h1 !h2 !h3 !h4 !h5 !h6*/

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: #1a1a1a;
    margin-bottom: 10px;
}
h1 {
    font-size: 3rem;
    line-height: 4rem;
}

/*img !img*/

img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -user-select: none;
    -webkit-user-drag: none;
    -user-drag: none;
	max-width: 100%;
}

/*ul !ul*/

ul {
	list-style: none;
}

strong {
	font-family: "brandon", brandon, helvetica, sans-serif;
}

article {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 580px;
	font-size: 18px;
	color: #00D2AD;
	margin-bottom: 30px;
}

/*hr !hr*/

hr {
	border: solid 1px #e0e0e0;
	display: block;
	margin-left: 6%;
	margin-right: 6%;
}

/*=============== Id ===============*/


#home {
	margin-left: 0%;
}

/*Box*/

#box {
	width: 100%;
	height: 30vw;
	margin-top: 1%;
	margin-bottom: 2.5%;
	background-image: url("../images/blur.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	border: 1px solid #00D2AD;
}
#box img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	width: 15%;
}
#box h1 {
	text-align: center;
}

/*Icon setting*/

div#a > a {
	float: right;
	font-size: 17px;
	margin-top: -1%;
	padding-right: 0.8%;
	padding-left: 0.8%;
	padding-top: 1%;
	padding-bottom: 1%;
	overflow: hidden;
}
div#a > a:hover {
    background-color: white;
    color:#00D2AD;
}

/*static-bar*/

#static-bar {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	text-align: center;
	background-color: #00D2AD;
	transition: all 3s;
}
#static-bar div#a > a {
	float: right;
	font-size: 17px;
	padding: 27.5px 15px 27.5px 15px;
}
#static-bar nav > ul > li > a {
	font-size: 17px;
	font-weight: 300;
	margin-left: 50px;
	color: white;
	transition: 0.1s;
}
#static-bar nav > ul > li {
	margin-left: 15%;
	margin-top: 1.6%;
}
#static-bar div#a > a {
	float: right;
	font-size: 17px;
}
#static-bar div#a > a:hover {
    background-color: white;
    color:#00D2AD;
}
#static-bar div#a {
	font-family: FontAwesome;
	font-style: normal;
	font-size: 15px;
}

.static-logo {
	margin-top: -0.5%;
	margin-left: 1%;
	float: left;
	width: 60px;
}

/*margin*/

#mrg-c {
	margin-left: 200px;
}

#mrg-c img {
	margin-left: -500px;
}

#margin {
	margin-left: 50px;
	margin-right: 65px;
}
#break {
	width: 3%;
}

#b-mgr {
	margin-bottom: 30px;
}

#mtd {
	width: 650px;
}

#bottom-image {
	width: 300px;
}

/*Subject header lines*/

#header-lines {
	overflow: hidden;
	text-align: center;
}
#header-lines h1:before, #header-lines h1:after {
	background-color: #e0e0e0;
	content: "";
	display: inline-block;
	height: 2px;
	position: relative;
	vertical-align: middle;
	width: 100px;
	z-index: -1;
}
#header-lines h1:before {
	right: 0.5em;
	margin-left: -50%;
}
#header-lines h1:after {
	left: 0.5em;
	margin-right: -50%;
}

/*============= Class ==============*/

/*static-bar class*/

.view2 {
	display: none;
}

.dlines {
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}

/*url link class*/

.link {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/*top-logo*/

.top-logo {
	margin-top: 25px;
	margin-bottom: 25px;
	width: 400px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*============= Header =============*/

/*header !section*/

header > section {
	overflow: hidden;
	background-color: #00D2AD;
	height: 46px;
}

header > section > ul > li {
	font-family: FontAwesome;
	font-style: normal;
	font-size: 15px;
}

/*section !a !ul*/

section > ul > li > a {
	float: left;
    font-size: 15px;
	font-weight: 600;
	
}
section a {
	color: white;
}

section > ul {
	margin-left: 5%;
}

/*nav !nav !a !target*/

header nav {
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

header nav > ul > li a {
	color: #777;
	font-weight: 600;
	text-align: center;
	margin-left: 5%;
}

header nav > ul > li a:target {
	color: #00D2AD;
	transition: all 0.65s;
}

header span {
	margin-left: 0.8vw;
	font-family: arial;
}

header a.mail {
	margin-left: 4%;
}

/*============== Main ==============*/

/*main*/

main {
	margin-left: 6%;
	margin-right: 6%;
	line-height: 1.5;
}

/*table*/

table {
	width: 100%;
	border: 0;
	margin-bottom: 50px;
}

td {
	width: 300px;
}

main span {
	font-weight: 1;
	font-family: Arial, Helvetica, sans-serif;
}

table a {
	color: blue;
}

/*IE10 in Windows 8 and Windows Phone 8 Bug fix*/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/*Header icon classes*/

.lang:before {content: "\0045 \004E \0047";}
.mail:before {content:"\f003";}
.phone:before {content:"\f095";}
.twitter:before {content:"\f099";}
.facebook:before {content:"\f09a";}
.google:before {content:"\f0d5";}
.linkedin:before {content:"\f0e1";}
.dribbble:before {content:"\f17d";}
.behance:before {content:"\f1b4";}

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Garbrant Consulting</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/ico" href="assets\images\logo-icon.ico">

        <link rel="stylesheet" href="assets/css/style.css">
        
			<link rel="stylesheet" href="style.css">
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script type="text/javascript" src="jquery-1.8.3.js"></script>

			<script src="script.js"></script>
        <script src="assets/js/scroll.js"></script>
    </head>
    <body>
        
        <header>
            <section>
                <ul>
                    <li>
                        <a href="tel:012-345 67 89"><span>012-345 67 89</span></a>
                        <a href="mailto:mail@example.com"><span>mail</span></a>
                    </li>
                </ul>
            </section>
            <a href="" class="top-logo">
            </a>

            <a class="link" href="#home"></a>
            <a class="selector"></a>
            <hr>
            
            <nav>
                <ul>
                    <li>
                        <a href="#home" onclick="home()">Hem</a>
                        <a href="#about" onclick="about()">Om</a>
                        <a href="#services" onclick="services()">Tjänster</a>
                        <a href="#method" onclick="method()">Metod</a>
                        <a href="#contact" onclick="contact()">Kontakt</a>
                    </li>
                </ul>
            </nav>
            <hr id="scroll-to">
        </header>

        <div id="static-bar" class="view2">
            <section id="margin">
                <ul>
                    <li>
                    </li>
                </ul>
            </section>
            <nav>
                <ul>
                    <li>
                        <a href="#home" onclick="home()">Hem</a>
                        <a href="#about" onclick="about()">Om</a>
                        <a href="#services" onclick="services()">Tjänster</a>
                        <a href="#method" onclick="method()">Metod</a>
                        <a href="#contact" onclick="contact()">Kontakt</a>
                    </li>
                </ul>
            </nav>
        </div>

        <br>
		<main>
            <div id="box">
                <br><br>
                <img src="assets\images\cik.png">
                <h1>Hej</h1>

            </div>

            <!--About--> 
            <a class="link" href="#about"></a>
            <div id="header-lines">
                <h1>Om</h1>
            </div>

            <table>
                <tbody>
                    <tr>
                        <article class="selector" href="#about">
                            <p>Garbrant Consulting är ett konsultföretag som erbjuder tjänster inom mat, dryck och hotell. Garbrant Consulting ägs och drivs av Ulrika Garbrant, civilekonom och projektledare med mångårig branscherfarenhet på strategisk och operativ nivå.</p>
                        </article>
                        <td valign="top">
                                <p>Garbrant Consulting skriver regelbundet artiklar i den internationella branschtidningen Foodservice Europe &amp; Middle East. Garbrant Consulting rapporterar om den Nordiska restaurangmarknaden (Sverige, Norge, Danmark, Finland) med aktuell branschfakta, trender och intervjureportage.<b></a></p>
                            <p>Garbrant Consulting vänder sig till företag och organisationer inom hotell-, restaurang- och måltids-branschen. Målgruppen består också av företag som på olika sätt har anknytning till mat och dryck, t ex fastighetsbolag, reseföretag, upplevelseföretag, friskvårdsföretag.<br>
                                Våra tjänster inkluderar konceptutveckling, analyser, strategier, strukturkapital, utbildning mm. <br /><a href="#services"> Läs mer om Tjänster.</a></p>
                        </td>
                        <td id="break"></td>
                        <td valign="top">
                            <p>Exempel på kundföretag: Scandic Hotels, Mat på Jobbet, Ballbreaker, Fritidsresor, Espresso House, Max Hamburger-restauranger, Medley, 8t8, Convini, Stöten i Sälen m fl.</p>
                            <p>Vi tror på kombinationen passion, struktur och affärsmässighet för bästa resultat. Garbrant Consulting kan stärka uppdragsgivaren på en eller flera av dessa punkter. <br><a href="#method">Läs mer om Metod.</a></p>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!--Services--> 
            <a class="link" href="#services"></a>
            <div id="header-lines">
                <h1>Tjänster</h1>
            </div>

            <table>
                <tbody>
                    <tr>
                        <article class="selector" href="#services">
                            <p>Garbrant Consulting erbjuder tjänster inom en rad områden, som rådgivare, projektledare eller resurs i en arbetsgrupp:</p>
                        </article>
                        <td valign="top">
                            <p><strong>Konceptutveckling</strong><br>Ett koncept är en helhet med många beståndsdelar. Garbrant Consulting kan bidra med kreativitet, marknadskännedom, trendkänsla, specialistkunskap och ett strukturerat arbetssätt för att utforma alla detaljer i konceptet. Garbrant Consulting kan även utvärdera befintliga koncept och utforma förbättringsförslag.</p>
                            <p><strong>Analyser</strong><br>En analys kan vara ett avgränsat projekt, t ex en kvalitetsutvärdering, marknadskartläggning eller trendrapport. Ofta är analysen en del i ett större projekt, t ex en förstudie inför ett strategiarbete eller ett underlag för konceptutveckling.</p>
                            <p><strong>Strategiarbete</strong><br>Vision, affärsidé, mål, vägval och strategier - Garbrant Consulting kan hjälpa er att skapa en strategisk plan för ert företag, affärsområde eller avdelning. Exempelvis är utvecklingen av en affärsplan en intern process som kan förstärkas och effektiviseras med Garbrant Consultings hjälp. Garbrant Consulting kan också fungera som bollplank och kritisk granskare av föreslagna strategier.</p>
                        </td>
                        <td id="break"></td>
                        <td valign="top">
                            <p id="b-mgr"><strong>Strukturkapital</strong><br>Ett företags strukturkapital är  dess samlade dokumentation av policies, koncept, arbetssätt  och rutiner. Syften med att skapa strukturkapital är kvalitetssäkring,  effektivisering av processer och daglig drift, konceptsäkring vid  expansion, uppföljning av prestationer mm. Ett väl utformat  strukturkapital ökar värdet på företaget. Ofta fungerar ett  strukturprojekt som en arbets- och utvecklingsprocess då det ibland  uppdagas att alla policies, konceptdetaljer och rutiner inte  är satta. Därför krävs en erfaren och kvalificerad projektledare för  att nå ett bra slutresultat. Exempel på slutprodukter:  Konceptbeskrivning, Driftsmanual, Franchisehandbok,  Utbildningsprogram.</p>
                            <p><strong>Artiklar</strong><br>Garbrant Consulting skriver regelbundet  artiklar i den internationella branschtidningen Foodservice Europe &amp;  Middle East. Garbrant Consulting rapporterar om den Nordiska  restaurangmarknaden (Sverige, Norge, Danmark, Finland) med aktuell  branschfakta, trender och intervjureportage. Andra skrivuppdrag kan  diskuteras.</p>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!--Method--> 
            <a class="link" href="#method"></a>
            <div id="header-lines">
                <h1>Metod</h1>
            </div>
            <table>
                <tbody>
                    <tr>
                        <article class="selector" href="#method"><p>Garbrant Consulting värdesätter ett nära och öppet samarbete med uppdragsgivaren.  Tillsammans åstadkommer vi det bästa resultatet.</p></article>
                        <td valign="top" id="mtd">
                            <p><strong>Arbetssätt<br></strong>En projektgrupp sätts samman bestående av Garbrant Consulting och en eller flera representanter från ert företag. Roller och ansvarsfördelning bestäms i uppstartfasen. Beroende på uppdragets art och vilka interna resurser som kan tillsättas, väljer ni som uppdragsgivare hur mycket ni deltar. Garbrant Consulting konsult kan anta rollen som projektledare eller producerande resurs i en arbetsgrupp som ni själva tillsatt.</p>
                            <p>Vi tror på kombinationen passion, struktur och affärsmässighet för bästa resultat. Garbrant Consulting kan stärka uppdragsgivaren på en eller flera av dessa punkter.</p>
                            <p>Begreppet passion innefattar både kreativitet, kunskap, vilja och drivkraft. Den brukar vara en stark faktor hos entreprenören, som kanske i första hand behöver hjälp med struktur. I en större organisation finns ofta en högre grad av struktur och affärsmässighet men kanske ett behov av en utomståendes drivkraft, kunskap och kreativitet.  Ibland är uppdragsgivaren stark på alla tre punkter men saknar helt enkelt tid och interna resurser för ett önskat projekt.</p>
                            <p><strong>Vad behöver ni hjälp med? </strong><br><a href="#contact">Kontakta oss</a></p>
                        </td>
                        <td id="break"></td>
                        <td valign="top"><img alt="bubblor (passion, struktur, affärsmässighet)" src="assets/images/bubbles.jpg">
                        </td>
                    </tr>
                </tbody>
            </table>

            <!--Contact-->
            <a class="link" href="#contact"></a>
            <div id="header-lines">
                <h1>Kontakt</h1>
            </div>
            <div>
                <article class="selector" href="#contact"><p>Välkommen att höra av dig.</p></article>
                <p><strong>Har du frågor om Garbrant Consulting och våra tjänster?</strong></p>
                <p>
                    <li>Vill du veta mer eller boka tid för ett möte?</li>
                    <li>Söker du samarbete?</li>
                    <li>Vill du diskutera en idé?</li>
                </p>
                <p><strong>Ulrika Garbrant</strong><br>
                    Tel: <a href="tel:012-345 67 89"><span>012-345 67 89</span></a><br>
                    E-post: <a href="mailto:mail@example.com">ulrika@garbrantconsulting.se</a>
                </p>
                <span><img alt="bild på person" src="assets/images/stand.png" id="bottom-image"></span>
            </div>
        </main>
    </body>
</html>

Answer 1

您的问题是，当您设置 location.hash 时，页面会立即跳转到哈希，而这不是您想要的。-有 thread关于在没有页面跳转的情况下更新 location.hash。

改变你的

location.hash = href

到

    if(history.pushState) {
        history.pushState(null, null, href);
    }
    else {
        location.hash = href;
    }

应该修复它。