javascript - Scroll to specific div after loading page when clicking an item -

javascript - Scroll to specific div after loading page when clicking an item -

what need click on dropdown selection redirect me page. when page loaded has scroll specific div.

the scenario is: client click drop downwards box , beingness redirected in page scrolled downwards product section.

i manage done if page doesn't reload or load every time e.g in middle of page. (with modifications)

my sample code @ momement is:

<div class="product-field product-field-type-a"> <span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>choose</strong></span> </span> <span class="product-field-display"><select id="field0custom_value" name="field[0][custom_value]" size="4" class="inputbox"> <option value="" selected="selected">apples</option> <option value="">oranges</option> </select> </span> <span class="product-field-desc"></span> <br> <br> <div id="header">header</div>

js:

$("#field0custom_value").click(function() { $('html,body').animate({ scrolltop: $("#header").offset().top}, 'slow'); });

ps. above beingness integrated in virtuemart + joomla 2.5 (at moment clicking select box broken , cant' figure out @ moment)

you want jump specific anchor on page b after clicking (selectbox) item in page a?

actually can done less javascript thought , without javascript (but not without adding backend logic or using links instead of select boxes).

page a

$(function(){ $("body").delegate("#target", "change", function(e){ // >>> interesting line location.href = "destination.html#" + $(target).val(); }); }); </script> <select id="target"> <option value="target1">target 1</option> <option value="target2">target 2</option> <option value="target3">target 3</option> </select>

changes location appending "hash"

page b

<br><!-- 20 of them; blow page height (or real content) --> <br> <div id="target1">target 1</div> <br> <br> <div id="target2">target 2</div> <br> <br> <div id="target3">target 3</div> <br> <br>

the id attribute refers hash value (anchor), alternatively add together <a name="target1" />

you may without javascript in page when using links:

<a href="destination.html#target1">target a</a>

javascript jquery css joomla2.5 virtuemart