Anker Problem
Hallo Leute,
nachdem ich im Web keine abgehandelte Lösung für mein Problem finden konnte, möchte ich es mal hier im Forum versuchen. Ich habe folgendes Problem:
Im Footer einer Seite habe ich die Menüpunkte a) "Impressum", b) "Datenschutz", und c)"Haftung". a) verweist direkt auf die Seite, b) und c) verweisen auf ihren jeweiligen Anker der Seite:
…/impressum/#!/anker_datenschutz
…/impressum/#!/anker_haftung
Das funktioniert problemlos. Problem aber nun: Wenn ich mich bereits auf der Seite a) befinde und b) oder c) klicke, so springt die Seite erst zum Anker, lädt dann die Seite neu und springt dann erneut zum Anker.
Damit wird natürlich genau das ausgeführt, was ich per Code vorgegeben habe. Aber gibt es möglicherweise irgendeinen Trick, wie ich das erneute Laden der Seite verhindern kann und einfach nur zum Anker gesprungen wird oder muss ich mit dieser Unzulänglichkeit leben?
Der hier verwendete Code
<style>
body{
height:2000px;
}
#anker1{
margin-top:50px;
background:red;
}
#anker2{
margin-top:900px;
background:red;
}
#anker3{
margin-top:1700px;
background:red;
}
footer{
display:flex;
background:red;
}
p{
cursor:pointer;
margin-left:20vw;
}
</style>
<body>
<p id="test" onclick="window.scrollTo(0, 2600);">Runter</p>
<div id="anker1">anker 1</div>
<div id="anker2">anker 2</div>
<div id="anker3">anker 3</div>
<footer><p id="haft" onclick="lauf(50,2200)">
Haftung
</p>
<p id="date" onclick="lauf(900,2200)">
Datenschutz
</p>
</footer>
<script>
//window.scrollTo(500, 0);
function lauf(b,c){
var a=a;
console.log(''+c+':'+b+'');
if(c>=b){
c-=20;
relo=setTimeout(function(){lauf(b,c);
},20);
window.scrollTo(0, c);
}else{
clearTimeout('relo');
}
}
</script>
</body>