Javascript HTML如何返回页面并滚动到页面中的特定点_Javascript_Html

Javascript HTML如何返回页面并滚动到页面中的特定点

javascript html

Javascript HTML如何返回页面并滚动到页面中的特定点,javascript,html,Javascript,Html,在我的网站主页上有一个联系人部分。单击导航栏中的联系人链接时，它会向下滚动到“联系人”部分。我使用了#contact这是contact部分div的名称我的问题是如何从不同的页面链接到这个页面，这样当在另一个页面上单击contact时，它会指向主页，然后向下滚动到div部分我在下面链接了一个代码笔，以便更好地解释情况锚定要转到的页面锚定要转到的页面这是一个重复的问题，但我将很快为您制作一个示例，并将您的代码粘贴到codepen.io中的注释部分我不会在重复的帖子上使用同样的方法，因为它

在我的网站主页上有一个联系人部分。单击导航栏中的联系人链接时，它会向下滚动到“联系人”部分。我使用了

#contact

这是contact部分div的名称

我的问题是如何从不同的页面链接到这个页面，这样当在另一个页面上单击contact时，它会指向主页，然后向下滚动到div部分

我在下面链接了一个代码笔，以便更好地解释情况

锚定要转到的页面

这是一个重复的问题，但我将很快为您制作一个示例，并将您的代码粘贴到codepen.io中的注释部分我不会在重复的帖子上使用同样的方法，因为它可能会帮助其他人这里有一个链接回答了你的问题

您上传到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>


$（文档）.ready（函数（）{
var scrolflag=localStorage.getItem（“storageName”）
如果（scrolflag=“scrolltocontact”）{
console.log（“准备就绪！”）；
var elmnt=document.getElementById（“contactus”）；
elmnt.scrollIntoView（）；
localStorage.setItem（“正常”）
警报（scrolflag）；
}
});
当您单击导航栏中的“联系我们”时，它会自动滚动
请转到“联系我们”部分。我通过使用#contactus作为
链接
这也是div的名称。但是当我转到另一个页面时，我会
仍然喜欢在导航栏中工作。请单击另一个页面以
继续。


添加文本以显示滚动。


Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。两人或两人在雷普雷亨德瑞特
lorium lourm

lorium lourm

lorium lourm

lorium lourm

lorium lourm

联系我们
如果您出于任何原因想联系我们，请给我们留言
如果您想要回复，请在下面添加电子邮件地址
名称：

电子邮件：

信息：

下面是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">


window.onload=函数（）{
}
函数myFunction（）{
var getInput=“scrolltocontact”
setItem（“storageName”，getInput）；
location.replace（“index.html”）
}
当我点击“联系我们”时，它会将我放回我的主页，我该如何做到这一点
（index.html），然后向下滚动到“联系我们”部分。谢谢你的帮助
救命啊。

style.css将保持不变

如果您需要任何进一步的帮助，请告诉我，我已经创建了一个局部变量来指示单击contact us，我正在将该变量从anotherpage.html调用到index.html，如果条件允许，我将根据该设置值滚动。您必须在滚动后清除存储器，否则它将继续滚动。。我把它放在这里是为了让你知道怎么做。。。

祝你好运&如果你需要进一步的帮助，请告诉我

这是一个重复的问题，但我将很快为您制作一个示例，并粘贴到codepen.io中代码的注释部分我不会在重复的帖子上使用同样的方法，因为它可能会帮助其他人这里有一个链接回答了你的问题

您上传到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>


$（文档）.ready（函数（）{
var scrolflag=localStorage.getItem（“storageName”）
如果（scrolflag=“scrolltocontact”）{
console.log（“准备就绪！”）；
var elmnt=document.getElementById（“contactus”）；
elmnt.scrollIntoView（）；
localStorage.setItem（“正常”）
警报（scrolflag）；
}
});
当您单击导航栏中的“联系我们”时，它会自动滚动
请转到“联系我们”部分。我通过使用#contactus作为
链接
这也是div的名称。但是当我转到另一个页面时，我会
仍然喜欢在导航栏中工作。请单击另一个页面以
继续。


添加文本以显示滚动。


Lorem ipsum Door sit amet，为精英们献身，为埃乌斯莫德服务
暂时性的劳工和财产损失。我们在这里吃得很少，
他在乌拉姆科实验室实习，并在普通实验室实习
康塞奎特。两人或两人在雷普雷亨德瑞特
lorium lourm

lorium lourm

lorium lourm

lorium lourm

lorium lourm

联系我们
如果您出于任何原因想联系我们，请给我们留言
如果您想要回复，请在下面添加电子邮件地址
名称：

电子邮件：

信息：

下面是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">


window.onload=函数（）{
}
函数myFunction（）{
var getInput=“scrolltocontact”
setItem（“storageName”，getInput）；
location.replace（“index.html”）
}
当我点击“联系我们”时，它会将我放回我的主页，我该如何做到这一点
（index.html），然后向下滚动到“联系我们”部分。谢谢你的帮助
救命啊。

style.css将保持不变

如果你需要进一步的帮助，请告诉我，我有crea

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

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