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

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

i creating page 5 divs. using next javascript code 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 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 start div # 3 on page load. solution worked onload function:

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

but unfortunately when load page url address

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

even when click on page anchors (div) , go there url stuck mainpage.aspx#section3.

i tried solutions here: jquery: how scroll anchor/div on page load?

but think because using javascript navigate divs, not working. want either:

remove address #section3 part , maintain using onload function

even improve navigate section3 @ start , have url alter when alter section

i using visual studio 2010 express, asp.net, js , c#. on windows 8.1

first next of import distinction:

jquery's #section1 selector looks html element id "section1", i.e. <div id="section1"></div> the href's #section1 url hash looks anchor name "section1", i.e. <a name="section1"></a>

this major difference need check , understand. need:

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

but since scrolling horizontally, going without <a name=...></a> part , deal hash in window load handler, explain farther down.

next is, avoid naming javascript variable "event" looks awful lot keyword, seek renaming ev.

if want click handler (the function bind click event) not follow link clicked on, function should homecoming false:

$('ul.nav a').click(function (ev) { var anchor = $(this); $('.viewport').stop().animate({ scrollleft: $($(anchor).attr('href')).offset().left }, 1500,'easeinoutexpo'); // add together section id url window.location.hash = $(anchor).attr('href').substring(1); ev.preventdefault(); homecoming false; });

then, i'd suggest move <ul class="nav">...</ul> outside of section divs, don't have repeat within divs. because seem scrolling left/right, assume floating section divs next each other in 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 next css (as illustration 3 600px divs floated next each other within 1800px container, wrapped 600px viewport):

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

for clearfix class, refer bootstrap's clearfix.

because scrolling horizontally, think <a name=...></a> things won't work, i'd onload check hash, , scroll there when accessing page preset hash. has been done in window load handler in next snippet, starting in section 3 when there no hash specified:

as starting in section 3 on load, have in $(window).load() handler, 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! :) please seek these, , should pretty close trying achieve.

hope helps!

javascript jquery asp.net navigation onload-event