1

I want to add page section ID to the end of the URL in address bar while scrolling:

for example

<section id="home"></section>
<section id="about"></section>
<section id="works"></section>

http://example.com/about/

or

http://example.com/works/

and of course when it's the home page remove the uri string.

and On page load I want the page scroll to the section requested, and I do not want it to just jump to that section.

Are there any jQuery written codes?! How can I do that?!

Afshin
  • 2,277
  • 5
  • 32
  • 51
  • I believe what you could change is the location hash and not the url. Trying to change the url (not just the hash) will reload the page – Sam Battat Jan 08 '15 at 18:17
  • also requires setting up server to mod_rewrite those paths or will end up with 404 on page refresh or from bookmark. Use hash instead if you don't want to rewrite at server – charlietfl Jan 08 '15 at 18:58

5 Answers5

0

The way to call a section idea in a link is <a href="#about">about</a> and this will take you to example.com/#about

Here is a JSFiddle example with the JQuery you can copy for smooth scrolling: http://jsfiddle.net/gvee/LYqVk/1/

Just click a link and it scrolls to that section ID.

Sanova
  • 541
  • 3
  • 10
0

jQuery will let you scroll to a location, but you will need more than jQuery. You will need to use a web framework that will interpret the url path (like /about/ or /works/) and pass that as a parameter to the page. For example, if your site is really just one page, you will need to configure your framework (be it .NET MVC, Struts 2, NodeJS, etc.) to always return the same page no matter the path, but to take that path and insert it on the page in some way, either into the HTML or the JavaScript.

For example, 

var desiredSection = "<%=blah%>"; // if you are using Java JSPs

Once you have that value assigned to a JavaScript variable, you can use some jQuery or JavaScript scrolling library to perform the action as mentioned in other answers.

One thing to be aware of is that this will create a potential XSS security issue so be careful if you are using this on a public-facing website.

user1
  • 720
  • 1
  • 9
  • 23
0

First for scrolling on page load you can use an already built-in feature. When you enter the URL and append #id it will scroll right away. You use <a href="#id">Go to #id</a> for this.

If you pretend the id to be appended to the URL, while scrolling and without reloading that is a little tricky:

// Order by position from top to bottom
var sections = $("#home, #about, #works"); // or $("section");

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();

    for(var i = 0; i < sections.length; i++) {
       var $section = $(sections[i]);
       if(scroll >= $section.offset().top) {

         // Will change URL without reloading, affecting the history
         history.replaceState("data",
                              "title",
                              location.origin + location.pathname + "#" +
                              $section.attr('id'));
    }
});
Afonso Matos
  • 2,047
  • 1
  • 16
  • 26
0

To change the url in browser you can use this

window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + 'section_id';

You need to use # as this is a client side routing on scrollable single page, so you can achieve example.com#about. Using / could be possible with server side routes and requires loading a new page.

This should work for you -> http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url

Ps. I know, asked in 2015 but still without an accepted answer.

ziomyslaw
  • 201
  • 1
  • 12
-1

This is not possible in IE <= 9 with the URL's you want.

you can see examples on how to programmatically scroll to an element with jquery here.

If you don't care about IE <= 9 you can use the window.history.replaceState() method to replace the current url with the one you want, and avoid navigation.

Community
  • 1
  • 1
wjohnsto
  • 3,735
  • 1
  • 12
  • 19