发表新帖
发表新帖

Javascript to make the page jump to a specific location

后端 未结
关注
8 533
悲哀的现实
悲哀的现实 2020-12-13 15:09

I there a way in javascript to make the page jump to a specific location on the page, such as
相关标签:
8条回答
  • 孤街浪徒
    2020-12-13 15:37

    If you use jQuery it's pretty simple here is some sample code

    Bellow is the #nav where I stored all the clickable links to the articles in this example

    Note: I used the goto attribute(custom) to pass the ID for the target Article 

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

    Here, bellow are the Articles you will be jumping to.

    Note: The JavaScript in the last code sample takes the distance of the tag to the top of that page and then scrolls the page down by that same distance measurement taken.

    <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>

    Finally this is the javascript + jQuery that makes it all work, this solution is best when you are working with fixed and layered components.

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

    javascript jquery

    0 讨论(0)
  • 忘掉有多难
    2020-12-13 15:41

    This can be accomplished by first creating an anchor for the page landing spot using HTML.

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

    Once you have the landing site, simply use the JavaScript:

    window.location = 'yoursite.html#jumpHere';
    0 讨论(0)
  • 醉话见心
    2020-12-13 15:41

    You don't need JS for that.

    Accessing yourpage.html#jump_to_this_location will do. This can be done through a link (<a href="#jump_to_this_location">jump</a>)

    0 讨论(0)
  • 孤城傲影
    2020-12-13 15:42

    2020 Answer

    A simple and modern way to do this would be like this:

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

    The behaviour: 'smooth' argument makes the jump... well... smooth. Which is something probably most of you want.

    0 讨论(0)
  • 醉话见心
    2020-12-13 15:48

    The rough sketch illustrates using the id attribute in element section to jump to different parts of the page using the anchor in navigation. That is, in your navigation:

     <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>
    0 讨论(0)
  • 野趣味
    2020-12-13 15:50

    You can set the location.hash property, like this:

    window.location.hash = "jump_to_this_location";

    You can give it a try here.

    0 讨论(0)
 看不清?
提交回复
热议问题