如何在不刷新页面的情况下重定向到锚标记?

时间:2019-06-24 21:02:10

标签: javascript jquery html

我试图使用锚点标签导航到同一页面的某一部分,而不刷新页面,因为我有一个表单,如果页面刷新,该表单会丢失数据。

由于某种原因,当搜索该问题时,所有答案似乎都可以解决除此特定问题以外的所有问题。我没有参考这是否可以纯HTML,Javascript或JQuery甚至使用锚标记来完成。我只希望能够无需刷新即可滚动到同一页面的一部分。

页面代码:

<div>

<a href="#faq">Link Test</a>


stuff here


<section id="faq">
</section>


</div>

更新 似乎我在寻找的是scrollIntoView()而不是锚标记

2 个答案:

答案 0 :(得分:1)

要获得这种影响,您需要使用AJAX请求。获得响应后,您可以在当前页面中追加或替换某些元素。您可以看到thisthis 例如。

答案 1 :(得分:0)

这可以通过锚标记来完成:

<div>

<a href="#contentId">Link to some content</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae elit ultrices, ornare metus ac, vehicula magna. Morbi sem metus, vulputate sit amet nunc at, aliquet luctus nisl. Pellentesque congue commodo turpis non luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed velit et nibh congue faucibus. Suspendisse dapibus leo eget nisl tincidunt placerat. Sed gravida ante quis erat tincidunt, nec auctor sapien volutpat.</p>
<p>
Sed aliquet blandit purus sit amet viverra. Etiam semper, magna ac dapibus luctus, sapien purus vulputate risus, a aliquet magna lorem ac quam. Etiam sagittis pellentesque felis. Ut vitae accumsan mauris, eu facilisis sem. Maecenas viverra commodo odio, sed convallis felis elementum eget. Vivamus imperdiet euismod velit rutrum pulvinar. In gravida nisi tortor, id dignissim nibh malesuada id. Phasellus at commodo neque, pellentesque posuere felis. Mauris sed accumsan tellus, a ultricies est. Quisque arcu sapien, vehicula et eleifend eu, sollicitudin non nibh. Duis in convallis mi. Vivamus ut metus justo. Phasellus pharetra posuere felis eget maximus. Duis ut diam eros.</p>
<p>
Donec consectetur velit ut metus mattis convallis. Nullam eleifend scelerisque diam, vitae pharetra nunc varius et. Sed tortor dui, cursus fringilla maximus non, sollicitudin in justo. Mauris volutpat rutrum nisi, quis condimentum nisi maximus sit amet. Sed vitae lacus sit amet nisi ultrices aliquam. Vestibulum ut aliquet dolor. Aenean ullamcorper mi dolor, vel pharetra justo hendrerit id. Proin condimentum lacinia quam placerat pretium. Duis varius mi eget enim dignissim, vulputate condimentum justo congue. Proin quis interdum nunc. Duis et tellus justo.</p>
<p>
Ut vel nibh in erat cursus maximus a sed nisi. Aliquam vulputate tincidunt est. Praesent euismod nulla eu posuere bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur est eu felis porttitor hendrerit. Duis sollicitudin, dui pulvinar egestas scelerisque, turpis risus convallis risus, ut pharetra est erat vitae eros. Donec eu metus elementum, viverra nulla et, condimentum risus. Curabitur dapibus aliquet magna ut vestibulum. Donec in dui sit amet risus maximus consectetur.</p>
<p>
Quisque auctor commodo nulla ac condimentum. Duis maximus mauris lacinia malesuada pulvinar. Donec enim nibh, pharetra sed dolor ac, euismod imperdiet felis. Donec a nibh turpis. Nam blandit erat velit, ac rutrum risus dictum ut. Morbi et sollicitudin ligula. Aliquam id libero massa. Proin pellentesque tincidunt volutpat. Curabitur magna erat, auctor a magna vitae, eleifend viverra neque.</p>


<section id="contentId">
Some content far below
</section>


</div>

或者,对于JS,使用location.hash属性:

function navigateTo(id) {
  window.location.hash = id;
}
<div>

<button type="button" onclick="navigateTo('contentId')">Link to some content</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae elit ultrices, ornare metus ac, vehicula magna. Morbi sem metus, vulputate sit amet nunc at, aliquet luctus nisl. Pellentesque congue commodo turpis non luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed velit et nibh congue faucibus. Suspendisse dapibus leo eget nisl tincidunt placerat. Sed gravida ante quis erat tincidunt, nec auctor sapien volutpat.</p>
<p>
Sed aliquet blandit purus sit amet viverra. Etiam semper, magna ac dapibus luctus, sapien purus vulputate risus, a aliquet magna lorem ac quam. Etiam sagittis pellentesque felis. Ut vitae accumsan mauris, eu facilisis sem. Maecenas viverra commodo odio, sed convallis felis elementum eget. Vivamus imperdiet euismod velit rutrum pulvinar. In gravida nisi tortor, id dignissim nibh malesuada id. Phasellus at commodo neque, pellentesque posuere felis. Mauris sed accumsan tellus, a ultricies est. Quisque arcu sapien, vehicula et eleifend eu, sollicitudin non nibh. Duis in convallis mi. Vivamus ut metus justo. Phasellus pharetra posuere felis eget maximus. Duis ut diam eros.</p>
<p>
Donec consectetur velit ut metus mattis convallis. Nullam eleifend scelerisque diam, vitae pharetra nunc varius et. Sed tortor dui, cursus fringilla maximus non, sollicitudin in justo. Mauris volutpat rutrum nisi, quis condimentum nisi maximus sit amet. Sed vitae lacus sit amet nisi ultrices aliquam. Vestibulum ut aliquet dolor. Aenean ullamcorper mi dolor, vel pharetra justo hendrerit id. Proin condimentum lacinia quam placerat pretium. Duis varius mi eget enim dignissim, vulputate condimentum justo congue. Proin quis interdum nunc. Duis et tellus justo.</p>
<p>
Ut vel nibh in erat cursus maximus a sed nisi. Aliquam vulputate tincidunt est. Praesent euismod nulla eu posuere bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consectetur est eu felis porttitor hendrerit. Duis sollicitudin, dui pulvinar egestas scelerisque, turpis risus convallis risus, ut pharetra est erat vitae eros. Donec eu metus elementum, viverra nulla et, condimentum risus. Curabitur dapibus aliquet magna ut vestibulum. Donec in dui sit amet risus maximus consectetur.</p>
<p>
Quisque auctor commodo nulla ac condimentum. Duis maximus mauris lacinia malesuada pulvinar. Donec enim nibh, pharetra sed dolor ac, euismod imperdiet felis. Donec a nibh turpis. Nam blandit erat velit, ac rutrum risus dictum ut. Morbi et sollicitudin ligula. Aliquam id libero massa. Proin pellentesque tincidunt volutpat. Curabitur magna erat, auctor a magna vitae, eleifend viverra neque.</p>


<section id="contentId">
Some content far below
</section>


</div>