javascript - 为什么单击锚链接后我的 jscript 开始出错
问题描述
我的网站的 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 & 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 & 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>解决方案
由于这两行，您的 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>
推荐阅读
- kendo-ui - Kendo Virtual ComboBox：选中的dataItem为null，不在bar中显示，但在datasource中存在
- ruby-on-rails - 如何在 Rails 应用程序中存储或保存内存加载的图像
- ssh - 无法 ssh 登录到 bitbucket.org
- html - 让 HTML 表格“挤压”
- ios - 在 App Store Connect 中更改现有 IAP 自动续订订阅
- bash - 如何防止执行 shell 命令？
- powershell - 需要使用 powershell 将文件中的 \x0d\x0a 替换为 \x2c\x0d\x0a
- javascript - 从一个组件对服务进行ajax调用并从另一个组件访问响应
- android - Android - 获取位置（地理编码器/谷歌播放服务）？
- spring - 如何确定我的 Spring/Quartz 配置使用了多少连接？