CODEWITHSUNDEEP
javascripthtmlurlscroll
Shimon S
Shimon S

Reputation: 4186

How to jump to certain position of scrolled element without scrolling the main screen?

I have a container (div) on the page. This container has a scrolling (provided by overflow:auto; height:400px).
I need no provide a URL, that will open a page so that the main page will not be scrolled, but the text in the container will be scrolled.
I tried www.mysite.com#position, but by this way the main page is scrolled too (and I need, that users will see the header on the top of the screen, and the "#position" position on the top of the container)

Upvotes: 3

Views: 1921

Answers (3)

Shimon S
Shimon S

Reputation: 4186

Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.

    jQuery(window).load(function(){
    container_top = jQuery('#container').offset().top;
    element_top = jQuery('#position').offset().top;
    element_relative_top = element_top -container_top;

    if (window.location.hash == '#scroll') {
        jQuery('#container').animate({
            scrollTop: element_relative_top
        }, 2000);
    }
})

Upvotes: 0

Arjan
Arjan

Reputation: 6274

This is possible with javascript. And I will show a jQuery example here.

if (window.location.hash == '#position') {
    $('#containerDiv').animate({
     scrollTop: $("#actual_position").offset().top
 }, 2000);
}

The actual_position should be the place where to scroll to. position should just be in the url and not on the page, to prevent the whole page from scrolling.

Upvotes: 2

Blauharley
Blauharley

Reputation: 4246

May you use the css-properties: position:fixed, top:..., left:... for your element that should stay at a certain place on your side, when an user scrolls. Furthermore you can put all content that you do not want to be scrolled into a div and define the css-properties.

I hope this helps you a little bit.

Upvotes: 0

Related Questions