CODEWITHSUNDEEP
javascriptjquerydebugginggoogle-chrome-devtools
Holly
Holly

Reputation: 7752

What is causing page to scroll

When viewing any of our product pages on a mobile, if you click the additional info tab the page scrolls to the bottom of the window.

I've tried debugging this in the chrome developer tools by putting a breakpoint on a click event and on a scroll event, but I'm not sure if I'm debugging this properly? The browser breaks on jquery-1.7.2.min.js and in particular on the first few lines of this code block.

if (!(a.nodeType === 3 || a.nodeType === 8 || !c || !d || !(h = f._data(a)))) {
    d.handler && (p = d, d = p.handler, g = p.selector), d.guid || (d.guid = f.guid++), j = h.events, j || (h.events = j = {}), i = h.handle, i || (h.handle = i = function(a) {
        return typeof f != "undefined" && (!a || f.event.triggered !== a.type) ? f.event.dispatch.apply(i.elem, arguments) : b
    }, i.elem = a), c = f.trim(I(c)).split(" ");
    for (k = 0; k < c.length; k++) {
        l = A.exec(c[k]) || [], m = l[1], n = (l[2] || "").split(".").sort(), s = f.event.special[m] || {}, m = (g ? s.delegateType : s.bindType) || m, s = f.event.special[m] || {}, o = f.extend({
            type: m,
            origType: l[1],
            data: e,
            handler: d,
            guid: d.guid,
            selector: g,
            quick: g && G(g),
            namespace: n.join(".")
        }, p), r = j[m];
        if (!r) {
            r = j[m] = [], r.delegateCount = 0;
            if (!s.setup || s.setup.call(a, e, n, i) === !1) a.addEventListener ? a.addEventListener(m, i, !1) : a.attachEvent && a.attachEvent("on" + m, i)
        }
        s.add && (s.add.call(a, o), o.handler.guid || (o.handler.guid = d.guid)), g ? r.splice(r.delegateCount++, 0, o) : r.push(o), f.event.global[m] = !0
    }
    a = null
}

Any idea on what could be causing the page to scroll this way and how to fix it?

Upvotes: 1

Views: 448

Answers (2)

Holly
Holly

Reputation: 7752

Thanks to the suggestions of @user2934565 and @Bojan Petkovski I was able to solve this issue.

The first thing was to realize that the page was not scolling on click. I was able to test this with window.pageYOffset in the console to get the currents scroll position. As the #acctab-description tab was being hidden on click of #acctab-additional tab. this created the illusion of the page scrolling as the documents height was being reduced.

As suggested by @user2934565 I wrote added the below JavaScript on the click event of the tabs to scroll the page to the correct position.

    // offset of elements above the tabs
    var offset1 = jQuery("div.product-secondary-column.grid12-3").offset().top;
    var offset2 = jQuery("div.product-shop.grid12-5").offset().top;
    var offset3 = jQuery("div.product-img-box.grid12-4").offset().top;
    var offsetTotal = offset1 + offset2 + offset3;

    jQuery(".acctab:not(.current)").click(function(){
        if(window.innerWidth < 977){
            var body = jQuery("html, body");
            body.animate({scrollTop:offsetTotal}, '10000', 'swing');
        }
    });

Upvotes: 0

frajk
frajk

Reputation: 863

The problem is that when you click on additional information, product description is collapsing, causing the elements in the page to move up, which gives the impression that the page scrolled down.

One solution would be to get the offset of an element like $("#acctab-description"), set to some variable like so, var offset = $("#acctab-description").offset().top, then scroll to that height using window.scrollTo(0, offset), and bind all of this to a click event on the additional info tab.

This may require some massaging to get to work exactly how you like, and there are certainly other methods of accomplishing the same thing, but, again, the problem isn't that the page is scrolling to the bottom when you click additional info, its that the page elements are moving up in response to the height being lost from the product information div being set to display:none

Upvotes: 1

Related Questions