Scrolling to a specific div using window.onload without adding to the web address

Question

I am creating a page with 5 divs. I am using the following JavaScript code to smoothly move between them horizontaly :

    $(function () {
    $('ul.nav a').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');

        event.preventDefault();
    });
});

The Divs are something like this:

 <div class="section white" id="section5">
            <h2>Technologies</h2>
            <p>
                text

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
                <li><a href="#section4">4</a></li>
                <li>5</li>
            </ul>
        </div> 

I want to start with div # 3 on page load. The only solution that worked is the onload function:

window.onload = window.location.hash = 'section3';

but unfortunately when I load the page the url address is

http://localhost:51551/trial1/MainPage.aspx#section3

even when I click on another page anchors (div) and go there the URL is stuck to MainPage.aspx#section3.

I tried the solutions here: jQuery: how to scroll to certain anchor/div on page load?

But I think because I am already using Javascript to navigate the divs, its not working. I want to Either:

1. Remove the address #section3 part and keep using the onload function

2. Even better navigate to section3 at start and have the url change when I change the section

I am using Visual Studio 2010 Express, with ASP.NET, JS and C#. on Windows 8.1

Answer 1

First the following important distinction:

• jQuery's #section1 selector looks for an HTML element with ID "section1", i.e. <div id="section1"></div>
• The a href's #section1 URL hash looks for an anchor with name "section1", i.e. <a name="section1"></a>

This is a major difference that you need to check and understand. So you would normally need:

<a name="section1"></a>
<div id="section1">... your content here ...</div>

But since you are scrolling horizontally, I am going to do this without the <a name=...></a> part and deal with the hash in the window load handler, as I will explain further down.

Next is, I would avoid naming a JavaScript variable "event" as that looks an awful lot like a keyword, so try renaming it to ev.

If you want the click handler (the function you bind to the click event) to not follow the link clicked on, that function should return false:

$('ul.nav a').click(function (ev) {
    var anchor = $(this);
    $('.viewport').stop().animate({
        scrollLeft: $($(anchor).attr('href')).offset().left
    }, 1500,'easeInOutExpo');

    // Add the section ID to the URL
    window.location.hash = $(anchor).attr('href').substring(1);

    ev.preventDefault();
    return false;
});

Then, I'd suggest you to move the <ul class="nav">...</ul> outside of the section divs, so you don't have to repeat it inside your divs. Because you seem to be scrolling left/right, I assume you are floating your section divs next to each other in a wide container:

<div class="viewport">
    <div class="container clearfix">
        <div class="section" id="section1">
            <h2>Technologies</h2>
            <p>Text</p>
        </div>
        <div class="section" id="section2">
            ... content ...
        </div>
        <div class="section" id="section3">
            ... content ...
        </div>
    </div>
</div>
<ul class="nav">
    <li><a href="#section1">1</a></li>
    <li><a href="#section2">2</a></li>
    <li><a href="#section3">3</a></li>
</ul>

Using the following CSS (as an example for 3 600px divs floated next to each other inside a 1800px container, wrapped by a 600px viewport):

.viewport {
  width: 600px;
  overflow: hidden;
  overflow-x: scroll;
}
.container {
  width: 1800px;
}
.section {
  float: left;
  width: 600px;
}

For the clearfix class, refer to Bootstrap's clearfix.

Because you are scrolling horizontally, I think the <a name=...></a> things won't work, so I'd do an onload check for the hash, and scroll there when accessing the page with a preset hash. This has been done in the window load handler in the next snippet, together with starting in section 3 when there is no hash specified:

As for starting in section 3 on load, have this in your $(window).load() handler, for example:

$(window).load(function() {
   var startSection = window.location.hash;
   if (startSection == "") startSection = '#section3';

   $('.viewport').scrollLeft($(startSection).offset().left);
   window.location.hash = startSection;
});

Disclaimer: untested code! :) But please try these, and it should get you pretty close to what you are trying to achieve.

Hope this helps!

Answer 2

Why don't you scroll to that div on window load? And change bind with on, as of jQuery 1.7 .on() is the preferred method for attaching event handlers to a document

So your code should be something like this

$(document).ready( function(){
    $('ul.nav a ').on('click ', function (event) {
        var $anchor = $(this);
        $('html, body ').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500, 'easeInOutExpo ');

        event.preventDefault();
    });
});


$(window).on('load', function () {

    $('html, body').stop().animate({
        scrollLeft: $('#section3').offset().left
    }, 1500, 'easeInOutExpo ');

});