Home/ Questions/Q 6172425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T23:23:25+00:00

Scrolling to anchors (using jquery) is common – however after the scroll, the user

  • 0

Scrolling to anchors (using jquery) is common – however after the scroll, the user is still able to scroll the entire page with the native scroll bar.

This is what’s needed in nearly every circumstance, however I’d like the user to click a link, get scrolled to the link – the html/body resize (to the divs) size and then the user can just scroll that area, like they’re on a separate page. I’ve accomplished this in FireFox, however in every other browser the code malfunctions. It seems i have something out of order/missing, as broswers like Chrome scrolling is fine, getting div height is fine but when the jquery resizes the html/body, chrome jumps right back up to the top of the page. How could i get around this?

Basically it’s function in FF 5.0 is perfect and i’d like to replicate it across most browsers.

html {
    overflow: auto;
}

body {
  overflow: hidden;
}

.

function goToByScroll(id){
            $('html,body').css('height', '100%');
            $('html,body').css('overflow', 'auto');
            $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow', function(){
                $('html').css('overflow','auto');
                $('body').css('overflow','hidden');
                $('html,body').css('height', ($("."+id).css('height')));

            });

    }

j

<div class="links">
                <ul class="navigation">
                    <li><a href="javascript:void(0)" onClick="goToByScroll('linkOne')">linkOne</a>
                    </li><li>
                    <a href="javascript:void(0)" onClick="goToByScroll('linkTwo')">linkTwo</a>
                    </li><li>
                    <a href="javascript:void(0)" onClick="goToByScroll('linkThree')">linkThree</a>
                    </li><li>
                    <a href="javascript:void(0)" onClick="goToByScroll('linkFour')">linkFour</a></li>
                </ul>
            </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s one way to do this by setting the content <div>s to overflow:auto and <body> to overflow:hidden then adjust the body’s top offset

    example: http://jsfiddle.net/pxfunc/BKvae/2/

    // declare re-usable jQuery objects and a scrollTo value
var $body = $('body'),
    $content = $('#content > div'),
    scrollTo = 0;

// adjust the content height on window resize
$(window).resize(function() {
    resizeContent();
});

var resizeContent = function() {
    $content.height($(window).height());
}; 

// initial setter for content area height to match window
resizeContent();

// handle link clicks via jQuery
$('.navigation a').click(function(e) {
    e.preventDefault()
    var $that = $(this); 
    var $contentArea = $($that.attr('href')); // get the div

    if ($contentArea.position().top !== 0) { // check if already on that contentArea
        scrollTo = ($body.css('top').replace(/\D+/g, '') * 1) + $contentArea.position().top; // calculate where the body offset should end up
        $body.animate({top: -scrollTo}, 'slow');
    }
});
    • 0