Почему мой jscript начинает глючить после нажатия на ссылки - PullRequest
Новая
       22

Почему мой jscript начинает глючить после нажатия на ссылки

0 голосов
/ 18 ноября 2018

в моем jscript есть ошибка для моего сайта.Воспроизвести его можно, щелкнув ссылки в статическом заголовке.После нескольких нажатий по ссылкам при прокрутке вы кладете на якоря при прокрутке, и она становится действительно глючной, а прокрутка невыносимой.

Что я могу сделать, чтобы решить эту проблему?Заранее спасибо

Вот мой код: 

$(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>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Ваша проблема в том, что когда вы устанавливаете свое местоположение. Хэш страница сразу переходит на хеш, и это не то, что вы хотите. поток об обновлении location.hash без перехода на страницу.

Измени свой

location.hash = href

до 

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

должно это исправить.

0 голосов
/ 18 ноября 2018

Ваши ошибки JS из-за этих двух строк: 

var href = $(anchors[i]).attr('href');
location.hash = href.slice(href.indexOf('#') + 1);

Метка привязки, расположенная рядом (под) <a href="#home">, не имеет атрибута href. Поэтому ваш JS задыхается от оператора href.slice.

Чтобы исправить это, вам, вероятно, следует объединить два соседних якоря.

Итак Изменение: 

       <a class="link" href="#home"></a>
       <a class="selector"></a>

К 

       <a class="selector link" href="#home"></a>
...