CODEWITHSUNDEEP
javascriptjqueryjquery-scrollable
user123456789
user123456789

Reputation: 566

Adjust scroll position to a closest div

Here i have bunch of div's with some related contents.

I want to adjust the scroll position to a closest div

Example Website

Demo Fiddle

How can i do this using jQuery

JQuery

$(".item").scroll( function( ) {
    $(".item").css({ top: $(this).scrollTop( ) });
});

Could anyone help me,

Thanks in Advance.

Upvotes: 1

Views: 10639

Answers (8)

Umer Javed
Umer Javed

Reputation: 17

                if ($(".text-danger").length) {

                    $(document).ready(function () {
                        $('html, body').animate({
                            scrollTop: $("form#partner-register-form div.text-danger").first().offset().top - 60
                        }, 1000);
                    });
                }

Upvotes: 0

Prashant Khadke
Prashant Khadke

Reputation: 1

Following method will help to adjust Div scroll position so that selected inner Div is viewable in view port.

jQuery :

function adjScrollPosition(container, elem) {
var h = container[0].clientHeight;
var w = container[0].clientWidth;
var t = container.scrollTop();
var l = container.scrollLeft();
var b = t + h;
var r = l + w;
elem = elem[0];
var eh = elem.offsetHeight;
var ew = elem.offsetWidth;
var et = elem.offsetTop;
var el = elem.offsetLeft;
var eb = et + eh;
var er = el + ew;
var top = et < t || eh > h ? et : b < eb ? t + (eb - b) : t;
var left = el < l || ew > w ? el : r < er ? l + (er - r) : l;
// If you want to bring element in center of the view port uncomment following lines
//var top = et - (h / 2) + eh;
//var left = el - (w / 2) + ew / 2;

$(container).stop().animate({ scrollTop: top, scrollLeft: left }, 500);
}

Upvotes: 0

Simon
Simon

Reputation: 1374

I found solution for what you want to achieve. You can change 200 on the following line so height from and to the top of the box will change.

if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 )

full code

var items = $(".thebox");
var animating = false;
    $(window).scroll(function() {
        clearTimeout($.data(this, 'scrollTimer'));
        if (!animating) {
            $.data(this, 'scrollTimer', setTimeout(function() {
                items.each(function(key, value) {
                    if ($(window).scrollTop() < $(value).offset().top+200 && $(window).scrollTop() > $(value).offset().top-200 ) {
                        animating = true;
                        $('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
                        setTimeout(function() { animating = false; }, 300);
                        return false;
                    }
                });
            }, 200));
        }
    });

DEMO

Upvotes: 0

Movs
Movs

Reputation: 381

To get it to work in Firefox, use

$('body,html').animate( ... );

Upvotes: 0

frogatto
frogatto

Reputation: 29285

Try this:

window.location.hash = 'your div id';

your updated fiddle : here

UPDATE
if you want to do this in a smooth way try this:

$(window).scroll(function() {
    var winScroll = $(this).scrollTop(); // current scroll of window

    // find cloest div
    var cloest = $('your main divs').first(); // first section
    var min = 10000;
    $('your main divs').each(function() {
        var divTopSpace = $(this).offset().top - winScroll;
        if( divTopSpave < min && divTopSpave > 0 ) {
            cloest = $(this);
            min = divTopSpace;
        } 
    });

    // animate
    $(document.body).animate({scrollTop: cloest.offset().top}, 'slow');
});

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23580

Here you go. You have to do a couple of things.

  • listen when the scrolling stops
  • find the "next" container
  • scroll to its top value, without triggering "the scroll end detection"

JavaScript

var items = $(".item");
var animating = false;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    if (!animating) {
        $.data(this, 'scrollTimer', setTimeout(function() {
            items.each(function(key, value) {
                if ($(value).offset().top > $(window).scrollTop()) {
                    animating = true;
                    $('body').animate( { scrollTop: $(value).offset().top + 'px' }, 250);
                    setTimeout(function() { animating = false; }, 300);
                    return false;
                }
            });
        }, 200));
    }
});

The "scroll end detection" is coming from yckart's answer to jQuery scroll() detect when user stops scrolling. All timings from this example can be adjusted to your needs.

Demo

Try before buy

Upvotes: 4

Sandip
Sandip

Reputation: 374

I thing you look for this..

check demo

<div class="item" id="123">(123 div Here )pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.pi ali waso sewi sijelo, li suwi anpa kalama ale. ike n prep sama sijelo, monsi nanpa sitelen mi ike. lipu kute telo ko ijo, e ali taso poki. ken ko sike nanpa. ike o luka suli. unpa kiwen uta a.</div>

<div style="width:20%;float:right;position:fixed;right:0px;">
   <ul>
       <li><a href="#123">123</a></li>
       <li><a href="#456">456</a></li>
       <li><a href="#789">789</a></li>
    </ul>
</div>

Upvotes: 0

SarathSprakash
SarathSprakash

Reputation: 4624

Working Sample DEMO

Try this

$(document).ready(function () {
    var full_url = this.href,

        target_offset = $('.item:first').offset(),
        target_top = target_offset.top;

    $('html, body').animate({
        scrollTop: target_top
    }, 500);
});

Upvotes: 0

Related Questions