使用边距顶部链接页面不起作用

Question

I'm building a website for my fathers company.我正在为我父亲的公司建立一个网站。 I made a menubar which sticks to the top, but to make that work, I had to add a margin-top of 120px.我制作了一个贴在顶部的菜单栏，但为了使它起作用，我必须添加一个 120px 的边距顶部。 That was no problem, so I did that.那没问题，所以我这样做了。

But if I click a link in that menubar, the tag I said it has to go to, goes to the top of the page.但是，如果我单击该菜单栏中的链接，我说它必须转到的标签会转到页面顶部。 But you can't see it, because the menubar is before the text.但是你看不到它，因为菜单栏在文本之前。 For example, if I click the link "Neuraal Netwerk", I want to see the h2 "Ervaring is de beste leermeester" and not a part of the <p> tag....例如，如果我点击链接“Neuraal Netwerk”，我想看到 h2“Ervaring is de beste leermeester”而不是 <p> 标签的一部分......

How can I solve this?我该如何解决这个问题？

Here is my JSFiddle: https://jsfiddle.net/7afvgbag/2/这是我的 JSFiddle： https ://jsfiddle.net/7afvgbag/2/

Here is my HTML code:这是我的 HTML 代码：

<html>
<head>
    <title>NeurOp</title>
    <link rel="stylesheet" type="text/css" href="../Stijlen/Index.css">
    <link rel="stylesheet" type="text/css" href="../Stijlen/Algemeen.css">
</head>
<body>

    <div class="navbar">

        <h1>NeurOp - Specialist in neurale oplossingen</h1>

        <ul>
            <li><a href="#home">Home</a></li> | 
            <li><a href="#neuraalNetwerk">Neuraal Netwerk</a></li> | 
            <li>Toepassingen</li> | 
            <li><a href="#overOns">Over ons</a></li> 
        </ul>


    </div>

        <div class="content">

            <div class="home">

                <h2 id="home">Neurale netwerktechnologie bereikbaar voor ieder bedrijf!</h2>
                <p>Dat is ons doel en dat bereiken we door neurale netwerk technologie toe te passen op bestaande sets data. Bedrijven kunnen zo direct profiteren van de voordelen die deze krachtige technologie biedt. En omdat veel bedrijven hun data verzamelen in Excel, bieden wij de mogelijkheid onze technologie in Excel te gebruiken.</p>

                <div class="lijnDun"></div>

                <h2>Wat doet een neuraal netwerk</h2>
                <p>Een neuraal netwerk is een zelf lerend computermodel. Het leert aan de hand van praktijkvoorbeelden, waar reguliere computermodellen worden gemaakt met behulp van business rules. Wil je een auto leren om zelf te rijden aan de hand van business rules, dan zal een oneindige set rules het gevolg zijn. Je kunt ook een zelf lerende computer laten &#39;meerijden&#39; met een goede chauffeur.</p>

            </div>

            <div class="lijnDun"></div>

            <div class="neuraalNetwerk" id="neuraalNetwerk">

                <h2>Ervaring is de beste leermeester</h2>
                <p class="ervaringLeermeester"><img src="../Media/pcHersenen.png" class="pcHersenen"><p>
                <p class="ervaringLeermeesterTekst">In het zenuwstelsel van een mens geven zenuwcellen via verbindingen signalen aan elkaar door. De sterkte van die signalen is gebaseerd op onze ervaring. Dus wanneer we bezig zijn met leren / oefenen, zijn we de verbindingen in ons brein aan het trainen. Door iets vaker te doen worden we er beter in. Iemand met heel veel ervaring, is een expert.<br><br>Een neuraal netwerk werkt precies zo. Het is een computermodel dat is samengesteld uit neuronen en verbindingen daartussen. Aan de hand van voorbeelden met een bekende uitkomst worden de verbindingen sterker of zwakker gemaakt net zolang tot het netwerk de juiste antwoorden geeft. Daarna geeft het netwerk ook de juiste antwoorden in een nieuwe situatie. Predictive Analytics, Artificial Intelligence, Machine Learning en Deep Learning zijn slechts andere benamingen voor deze vorm van technologie. </p>
                <h4>&#34;Een neuraal netwerk neemt het juiste besluit, iedere keer opnieuw.&#34;</h4>

            </div>

            <div class="lijnDik"></div>

            <div class="toepassingen">
                <h2>Toepassingen</h2>
                <h3>Incasso: Dagvaarden om het proces of om te incasseren?</h3>
                <p>Alle inspanningen ten spijt, zijn er altijd debiteuren die hun factuur niet (kunnen) betalen. En naar genoeg lopen juist de kosten van de niet succesvolle incasso dossiers het hoogst op. <br><br>
                Hoe eerder in het incasso proces bekend is of de vordering betaald zal worden of niet (kan of wil de debiteur niet betalen), hoe effici&#235;nter het proces hierop ingeregeld kan worden.  <br><br>

                Met name wanneer de kostbare keuze om al dan niet te dagvaarden gemaakt moet worden is de toegevoegde waarde van een goed advies van doorslaggevend belang. <br><br>

                Afgesloten dossiers vormen de voorbeelden waarmee het neurale netwerk getraind wordt. Voor lopende dossiers zijn we vervolgens in staat om ruim 25% van de kosten besparen.</p>

                <div class="lijnDun"></div>

                <h3>Commercie: Jagen op kansloze missies, of focus op re&#235;le kansen?</h3>
                <p>Waar in de markt moet ik zijn om zinvol te acquireren? Op welke aanbesteding kan ik beter niet inschrijven omdat we die niet gaan winnen? Aan welke prospect besteed ik op vrijdagmiddag mijn laatste tijd deze week? Het antwoord op dit soort vragen is de sleutel naar een efficiëntere verkoopafdeling. <br><br>

                En dat is concreet mogelijk met neurale netwerktechnologie! Zo zijn we bij voorbeeld in staat om de openstaande offertes van een bedrijf te onderverdelen in drie groepen:
                    <ul class="commercie">
                        <li>Offertes waarvan 60% zal leiden tot een opdracht.</li>
                        <li>Offertes waarvan 20% zal leiden tot een opdracht.</li>
                        <li>Offertes waarvan 1% zal leiden tot een opdracht.</li>
                    </ul>
                </p>

                <div class="lijnDun"></div>

                <h3>Logistiek: Blijft de klant thuis voor de bezorger, of niet?</h3>
                <p>Hoe laat de pakketbezorger een pakketje aan zal bieden is lastig te voorspellen. Dit is niet alleen afhankelijk van de chauffeur, maar bij voorbeeld ook van de weersomstandigheden en het aantal pakketten dat die dag uitgereden moet worden. We hebben &#39;proof of concept&#39; mogen leveren op het afgeven van een tijdvakindicatie voor de bezorging van een pakket. Met neurale netwerktechnologie zijn we in staat het aantal verkeerde voorspellingen met 2/3 terug te dringen.<br><br>

                Wanneer de voorspelde bezorgtijd betrouwbaar blijkt, zal de consument er meer waarde aan hechten. En er voor thuis blijven, waardoor de klanttevredenheid omhoog gaat evenals de &#39;hitrate&#39; in de bezorging.</p>

                <div class="lijnDun"></div>

                <h3>Huurinning: De huurder uitzetten of het samen oplossen?</h3>
                <p>&#39;Vroege signalering&#39;, de branche heeft het er al jaren over en neurale netwerktechnologie maakt het mogelijk. Iedere maand opnieuw worden woningcorporaties geconfronteerd met huurders die niet (op tijd) betalen. Een klein deel hiervan belandt uiteindelijk in een uitzettingsprocedure. Wanneer bij de eerste uitblijvende betaling al duidelijk is hoe groot de kans is dat de huurder behoort bij die kleine probleemgroep, kan de opvolging hierop inspelen. Dat verhoogt de kans om samen met de huurder andere oplossingen te vinden. De  toegevoegde waarde is sociaal misschien nog wel groter dan financieel.</p>
            </div>

            <div class="lijnDik"></div>

            <div class="overOns" id="overOns">

            <h2>Over ons</h2>

            <p class="pfTekst">Een succesvol neuraal netwerk realiseren is complex. Om van scratch af aan een neuraal netwerk te bouwen, is gedegen kennis van de neurale netwerk technologie en algoritmes noodzakelijk.  
Analytisch vermogen en het goed begrijpen van de klantsituatie zijn essentieel om de juiste toepassingen binnen een organisatie te herkennen en de data bruikbaar in te zetten.<br><br>

            Dat is ons specialisme. Daarbij wij zijn zo overtuigd van de effectiviteit van onze toepassingen, dat we werken volgens het &#39;no cure no pay&#39; principe. <br><br>

            <em>&#34;Resultaten uit het verleden zijn de basis voor de toekomst.&#34;</em></p>

            <p class="pasfotoP"><img src="../Media/pfk.jpg" class="pasfoto"></p>
            <p class="pasfotoP"><img src="../Media/pfj.png" class="pasfoto pfJeroen"></p>
            <p class="afbeeldingTekst"><em>Koen Meeusen en Jeroen Blokdijk</em></p>

            </div>

        </div>

            <div class="footer">

                <p class="links">Neur<em>Op</em> BV<br>
                koen.meeusen@neurop.nl<br>
                <a href="tel:+31 651 808 628">+31 651 808 628</a></p>

                <p class="rechts">KvK nummer: 64592154<br>
                BTW nummer: 855734425B01<br>
                IBAN: NL80 INGB 0007 1271 10<br>
                <a href="../Media/AlgemeneVoorwaarden.pdf" target="_blank">Algemene Voorwaarden</a></p>

            </div>

        <!-- Algemene voorwaarden in PDF bestand downloaden in footer -->

     </body>
 </html>

And here is my CSS code:这是我的 CSS 代码：

/************/
/* MENUBALK */
/************/
.navbar {
background-color: #60C8FF;
width: 100%;
height: 120px;
border-bottom: 3px solid #36B9FF;
position: fixed;
top: -5px;
}

.navbar h1 {
padding: 5px;
border-bottom: none;
text-align: center;
}

.navbar li {
display: inline;
width: 100%;
}

 .navbar ul {
text-align: center;
width: 100%;
    position: fixed;
    top: 50px;
}

/**********/
/* FOTO'S */
/**********/

.afbeeldingTekst {
margin-top: 0px;
}

/********************/
/* LIJN ONDER KOPJE */
/********************/

.lijnDik {
border-top: solid 4px #36B9FF;
}

.lijnDun {
border-top: solid 2px #36B9FF;
}

/***********/
/* CONTENT */
/***********/

.content {
width: 70%;
margin: auto;
}

.home {
margin-top: 120px;
}

.machineLearning {
border-bottom: 2px solid #36B9FF;
width: 100%;
}

.pcHersenen {
width: auto;
height: auto;
max-width: 90px;
margin-top: -16px;
}

.ervaringLeermeester {
float: left;
}

 .commercie {
margin-top: -15px;
margin-left: -20px;
list-style-type: square;
}

.overOns {
width: 100%;
}

.pasfoto {
width: auto;
height: 150px;
border-radius: 30px;
}

.pasfotoP {
display: inline-block;
}

.pfJeroen {
margin-left: 30px;
}

/**********/
/* FOOTER */
/**********/


.footer {
background-color: #303030;
color: #FFF;
height: auto;
display: inline-block;
width: 100%
}

.footer p {
display: inline-block;
}

.footer .links a {
color: #FFF;
text-decoration: none;
pointer-events: none;
    cursor: text;
}

.footer .rechts a {
color: #FFF;
}

.footer .rechts {
float: right;
margin-right: 10px;
}

.footer .links {
float: left;
margin-left: 10px;
}

Answer 1

I tried a lot of things to fix this, but I don't think you will be able to pull it off with only CSS.我尝试了很多方法来解决这个问题，但我认为您无法仅使用 CSS 来解决这个问题。 Adding the #id to the href of the anchor tag tells the browser to put the element with that id on the y-position: 0. I tried adding ::before on the .content , padding-top , ... But every time it adds up to that first element... You can't add 120px padding on every div you want to link to because it will look ridiculous.将#id添加到锚标记的 href 告诉浏览器将具有该 id 的元素放在 y 位置：0。我尝试在.content上添加::before ， padding-top ，...但每次它加起来就是第一个元素......你不能在你想要链接的每个 div 上添加120px填充，因为它看起来很荒谬。

I suggest you try to fix this with JS or read these related posts.我建议您尝试使用 JS 解决此问题或阅读这些相关帖子。

HTML position:fixed page header and in-page anchors HTML 位置：固定页眉和页内锚点

offsetting an html anchor to adjust for fixed header 偏移 html 锚点以调整固定标题

Also, try not to put classes or anything of your markup in Dutch... You should use English in case you need to ask questions up here.此外，尽量不要将类或任何标记用荷兰语...如果您需要在这里提问，您应该使用英语。

使用边距顶部链接页面不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-15 13:30:07

使用边距顶部链接页面不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-15 13:30:07

解决方案1
0 已采纳 2016-10-15 13:30:07