CODEWITHSUNDEEP
javascriptjqueryhtml
Dale
Dale

Reputation: 955

Scroll to Div inside Wrapper not Body

I am using jQuery code from http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/ to scroll to a Div within a Wrapper.

The code provided animates the body (Scrolls the body down onClick) I am trying to animate the scroll inside a div, not body.

My code below:

HTML:

    <a href="#Div3" class="ScrollDown">Scroll Down</a>

    <div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
       <div id="Div1" style="height:200px; width:600px;"></div>
       <div id="Div2" style="height:200px; width:600px;"></div>
       <div id="Div3" style="height:200px; width:600px;"></div>
   </div>

jQuery

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

$(document).ready(function() {
    $('a.ScrollDown').click(function (e) {
    e.preventDefault();
    scrollToElement('#Div3');
    }); 
});

I know it has something to do with $('html, body').animate({ }) but im not sure how to change it.

Thanks

JSFiddle http://jsfiddle.net/3Cp5w/1/

Upvotes: 0

Views: 1964

Answers (3)

sanjeev
sanjeev

Reputation: 4621

Try the following Code

    <body>     
 <a href="#Div3" class="ScrollDown">Scroll Down</a>

    <div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
       <div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
       <div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
       <div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
   </div>
 </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('.Wrapper').animate({
        scrollTop: offsetTop
    }, time);
}

$(document).ready(function() {
    $('a.ScrollDown').click(function (e) {
    e.preventDefault();
    scrollToElement('#Div3');
    }); 
}); 
</script>

i think you want div3 to scroll down inside Wrapper

you need to first specify the height of Wrapper to a small number so that scroll is visible & as you guessed change html,body to .Wrapper

do ask for help

Upvotes: 1

Maurice Perry
Maurice Perry

Reputation: 32831

Animate the wrapper instead of the body:

$('.Wrapper').animate({
    scrollTop: offsetTop
}, time);

http://jsfiddle.net/robbyn/qU6F7/1/

Upvotes: 2

Rehan Parvez
Rehan Parvez

Reputation: 143

Add the jQuery updated file reference

<script src="http://code.jquery.com/jquery-1.10.2.js"  />

Upvotes: 0

Related Questions