带有跳转链接的网页

Question

I am new in the world of web development so excuse my ignorance in some points :p

Anyone can tell how jump links work? And how to implement them?

Let me make a specific example, I want to create a website with an horizontal bar, I saw some modern sites that those links doesn't change the page, they just jump down to another section and if I scroll up, I end up on home again.

How can I implement this and does it work with bootstap?

Thanks

Answer 1

That, my friend, is a single page website, they are not jump links, you are only using jquery to scroll down to the content on click.

Here is an example of a code that will do just that :

$(function() {
    $("#abc").bind("click", function() {
        $("html, body").animate({
            scrollTop: $("#anchor").offset().top
        }, 500);
    });
})(jQuery);

When you click on an element with an id of abc it will take you to the top of the #anchor id element, no matter where on the page it is found.

Also, here is an example using this exact code : jsfiddle

Answer 2

<a href="#title1">Go to title1</a>
<a href="#title2">Go to title2</a>


/* Lots of space */

<a name="title1">Title 1</a>

/* Lots of space */

<a name="title2">Title 2</a>