2020年答案

Question

我在javascript中有一种方法可以让页面跳转到页面上的特定位置，例如

<span id='jump_to_this_location'></span>

我不想重新加载页面，

Answer 1

您可以设置location.hash属性，如下所示：

window.location.hash = "jump_to_this_location";

You can give it a try here

Answer 2

这可以通过首先使用HTML为页面着陆点创建锚点来实现。

<a name="jumpHere">somewhere</a>

登陆网站后，只需使用JavaScript：

window.location = 'yoursite.html#jumpHere';

Answer 3

2020年答案

一种简单而现代的方法是这样的：

document.getElementById("jump_to_this_location").scrollIntoView({behavior: 'smooth'});

behaviour: 'smooth'自变量使跳转...顺利进行。这可能是您大多数人想要的。

Answer 4

我意识到这个问题已经有五年了，但是人们仍然会发现它，而且似乎很遗憾没有人能够回答它......

具体而言＃34;没有重新加载页面＆＃34;按照要求，

并且有一个名字=＆＃34; HERE＆＃34;或id =＆＃34; HERE＆＃34;标签中的某处（＆＃34; HERE＆＃34;当然是任何标签的一个例子），

然后Javascript就可以：

if (navigator.userAgent.match(/Chrome|AppleWebKit/)) { 
    window.location.href = "#HERE";
    window.location.href = "#HERE";  /* these take twice */
} else {
    window.location.hash = "HERE";
}

适合我。

Answer 5

如果您使用jQuery，这里的一些示例代码

非常简单

Bellow是#nav，我将所有可点击链接存储到此示例中的文章

注意：我使用goto属性（自定义）传递目标文章的ID

<div id='nav'>
  <div goto='text1'>Link To Text 1</div>
  <div goto='text2'>Link To Text 2</div>
</div>

在这里，下面是你要跳的文章。

注意：最后一个代码示例中的JavaScript将标记的距离取到该页面的顶部，然后按照相同的距离测量值向下滚动页面。

<div id='articles_container'>
 <article>
  <h1 id='text1'></h1>
  <p>
    Sample article Paragraph 1
  </p>
 </article>
 <article>
  <h1 id='text2'></h1>
  <p>
    Sample article Paragraph 2
  </p>
 </article>
</div>

最后，这是javascript + jQuery，它使一切正常，当你使用固定和分层组件时，这个解决方案是最好的。

<script>
        $(document).ready(function(){
          $('#nav div').click(function(){
            var id = "#" + $(this).attr('goto');
            var top = $(id).position().top;
            $('html').scrollTop(top);
          });
        });
</script>

javascript jquery

Answer 6

你不需要JS。

访问yourpage.html#jump_to_this_location即可。这可以通过链接（<a href="#jump_to_this_location">jump</a>）

来完成

Answer 7

粗略的草图说明了使用元素部分中的id属性使用导航中的锚点跳转到页面的不同部分。也就是说，在您的导航中：

 <li><a href="#id_from_the_desired_jump_to_section"></a></li>

<!DOCTYPE html>
    <html>
    <head>
        <title>Go to section</title>
        <style type="text/css">
            .navigation {
                position: fixed;
                background-color: green;
                width: 100%;
                height: 50px;
                margin-top: 0px;
                margin-right: 0px;
            }
            .navigation li {
                display: inline;
                width: auto;
                list-style-type: none;
                font-size: 20px;
                text-decoration: none;
            }
            a:hover, {
                background-color: white;
            }
            a: focus {
                color: lime;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul class="navigation">
                <li><a href="#about">About US</a></li>
                <li><a href="#clients">Our clients</a></li>
                <li><a href="#branches">Our Offices</a></li>
                <li><a href="#samples">Projects</a></li>
                <li><a href="#team">The team</a></li>
                <li><a href="#contacts">Contact US</a></li>
            </ul>
        </nav>
    <section id="about">
        <div class="about" style="background-color: skyblue; height: 500px;">

        </div>
    </section>
    <section id="clients">
        <div class="clients" style="background-color: blue; height: 500px;">

        </div>
    </section>
    <section id="branches">
        <div class="branches" style="background-color: lime; height: 500px;">

        </div>
    </section>
    <section id="samples">
        <div class="samples" style="background-color: olive; height: 500px;">

        </div>
    </section>
    <section id="team">
        <div class="about" style="background-color: grey; height: 500px;">

        </div>
    </section>
    <section id="contacts">
        <div class="about" style="background-color: gold; height: 500px;">

        </div>
    </section>
    </body>
    </html>

Answer 8

试试这个（使用JavaScript）：

location.hash = "div-Name";

Answer 9

我使用类似这样的东西跳转到基于Id的元素，触发器是锚标记，其中href引用了Id：

<a href="#focusElement">Click Me</a>

和目标元素：

<section id="focusElement">Section element</section>

我没有使用上面接受的答案，因为它现在在HTML5中已经过时了，只是为了更新那些相当古老的帖子。

Javascript使页面跳转到特定位置

9 个答案:

2020年答案

如果您使用jQuery，这里的一些示例代码