CODEWITHSUNDEEP
jqueryhtmlcss
ShibinRagh
ShibinRagh

Reputation: 6646

Change default scrollbar scrollposition in an html div

Is it possible to change starting scrollposition of 'scrollbar' by css or jQuery

See the demo - div.container scroll until active element item(blue color) is shown as the topmost element in the div.

Note : I dont need jQuery 'content scroll' plugin

<div class="container">
    <ul class="content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="active">5 active</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

Upvotes: 1

Views: 3683

Answers (3)

Malini C
Malini C

Reputation: 1

You can use scrolltop() to do it , such that the highlighted li comes at that top

$(document).ready(function(){
$( "div.container" ).scrollTop( 175 );
});

Upvotes: 0

A. Rama
A. Rama

Reputation: 912

$(function() {
    var t = $('li.active').position().top;
    $('div.container').scrollTop(t);
});

Upvotes: 1

Jai
Jai

Reputation: 74738

apply the scrollTop() this way:

$('.container').scrollTop($('.content').find('.active').position().top);

Demo

If you want it animated way use .scrollTop() with .animate():

$('.container').animate({
    scrollTop:$('.content').find('.active').position().top
});

Demo with animate.

Upvotes: 5

Related Questions