HTML如何返回页面并滚动到页面中的特定点[重复]

Question

在我的网站主页上有一个联系部分。当您单击导航栏中的联系人链接时，它会向下滚动到联系人部分。我通过使用#contact 来完成此操作，这是联系人部分的 div 的名称。

我的问题是我如何从不同的页面链接到这个，所以当在另一个页面上点击联系人时，它会指向主页，然后向下滚动到 div 部分。

我在下面链接了一个代码笔来更好地解释这种情况。

https://codepen.io/CODEN000B/project/editor/XpyyGp

Answer 1

锚定你想去的页面。

<a href="/my/path/index.html#contact">link to contact</a>

Answer 2

要向页面添加锚超链接（部分），请在 anotherpage.html 中执行以下操作

<a name="sectiontoscrollto"></a> 

然后像这样从其他页面链接或链接

<a href="anotherpage.html#sectiontoscrollto">Another Page</a>

Answer 3

这是重复的问题，但我会尽快为您提供一个示例并粘贴到 codepen.io 中代码的注释部分 我不会在重复的帖子上使用相同的方式，因为它可能会帮助其他人 这是一个回答您问题的链接。

jQuery scroll to ID from different page

click here to download您在 codepen.io 中上传的文件，并从另一个页面滚动

这里还有你应该放在 index.html 上的代码

<link rel="stylesheet" type="text/css" href="style.css">
<!-- navigation bar -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>


<div class="nav">
    <div class="nav-header">
        <div class="nav-title">



        </div>
    </div>
    <div class="nav-btn">
        <label for="nav-check">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>
    <input type="checkbox" id="nav-check">
    <div class="nav-links">

        <a href="index.html" onclick="myFunction()">Contact Us</a>
    <a href="anotherpage.html"  onclick="myFunction()">Another Page</a>


    </div>
</div>
<!-- navigation bar ends -->
<script>

$( document ).ready(function() {
var scrolflag = localStorage.getItem("storageName")
if (scrolflag = "scrolltocontact") { 
console.log( "ready!" );
var elmnt = document.getElementById("contactus");
elmnt.scrollIntoView();

localStorage.setItem("normal")
alert(scrolflag);

}

});

</script>

<div id="firstsection">

When you click "Contact Us" in the navigation bar it automaticially scrolls 
down to the contact us section. I have done this by using #contactus as a 
link 
which is also the name of the div. However when I go to another page I would 
still like this to work in the navigation bar. Please click Another Page to 
continue.<br><br>

Added text to show scrolling.<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in 


</div>

<div style="height:5in;"> 
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
lorium lourm <br>
<div>

<div id="contactus">
<h1>Contact Us</h1>
    <p>If you would like to contact us for any reason, drop us a message 
below, add an email address if you would like a reply.</p>
    <p> Name: <br> <input type="text" id="firstname"name=""></p>
    <p> Email: <br> <input type="text" id="email" name=""></p>
    <p> Message:  <br><textarea id="message"rows="4" cols="50"></textarea> 

</div>

Anotherpage.html 的代码：

<link rel="stylesheet" type="text/css" href="style.css">
<!-- navigation bar -->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 

<div class="nav">
    <div class="nav-header">
        <div class="nav-title">



        </div>
    </div>
    <div class="nav-btn">
        <label for="nav-check">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>
    <input type="checkbox" id="nav-check">
    <div class="nav-links">

        <a href="index.html" onclick="myFunction()">Contact Us</a>
    <a href="anotherpage.html"  onclick="myFunction()">Another Page</a>

    </div>
</div>
<script>
window.onload = function() {

}
</script>


<!-- navigation bar ends -->
<script>

function myFunction() {


 var getInput = "scrolltocontact"
localStorage.setItem("storageName",getInput);
 location.replace("index.html")
}
</script>

</script>
<div id="firstsection">

How do I make it so when I click contact us it puts me back on my home page 
(index.html) and then scrolls down to contact us section. Thanks for your 
help.


</div>

style.css 将保持不变，

如果您需要任何进一步的帮助，请告诉我，我已经创建了一个局部变量来指示点击联系我们，我正在将该变量从 anotherpage.html 调用到 index.html，并且如果条件我正在基于它滚动设定值 。滚动后您必须清除存储空间，否则它将继续滚动..我这样离开它，这样您就可以知道该怎么做... 祝你好运，如果您需要任何进一步的帮助，请告诉我。