CODEWITHSUNDEEP
javascriptjquery
oyed
oyed

Reputation: 570

CSS Zoom interfering with jQuery scrollTop

I'm creating a Website that, on Mobile Browsers, zooms out, as it's a fixed width website. Instead of using the viewport meta tags I've taken to the following:

html, body {
    zoom: 0.8;
}

This works great, but the problem is with my jQuery. I'm using simple jQuery code for a one-page website smooth scrolling, shown below:

/* Start Navigation */
jQuery('nav ul.menu li').click(function(e) {
    if(!scrollingAnim) {
        var page = jQuery(this).attr('data-page');

        updateMenu(page);

        scrollingAnim = true;

        jQuery('html, body').stop().animate({
            scrollTop: (jQuery(page).offset().top - 70)
        }, 2000, 'swing', function() {
            scrollingAnim = false;
        });
    }

    e.preventDefault();
    return false;
});
/* End Navigation */

This used to work fine, but for obvious reasons will not work with my zoom. I've tried multiplying it by the zoom level, but it doesn't work. Is there anything you'd suggest?

Upvotes: 1

Views: 3272

Answers (2)

Vladislav Vazhenin
Vladislav Vazhenin

Reputation: 349

Faced with similar problem related to zoom and offset().Top. Tried to play with values in JS console and found this formula:

var scrollTopAnimateTo = ($(anchor).offset().top - $(".header").height()) * zoom + $(window).scrollTop() * (1 - zoom);

where zoom < 1.

Upvotes: 0

Mladen Janjetovic
Mladen Janjetovic

Reputation: 14634

jQuery's .offset().top is changing with the change of the window scroll when you have CSS zoom involved...

Take a look at my answer here https://stackoverflow.com/a/21048208/1090395 Hope it helps

Upvotes: 1

Related Questions