Question

在手机上查看我们的任何产品页面时，如果您点击其他信息标签页面滚动到窗口底部。

我已经尝试通过在click事件和滚动事件上设置断点来在chrome开发人员工具中调试它，但我不确定我是否正在调试这个？浏览器在 jquery-1.7.2.min.js 上中断，特别是在此代码块的前几行。

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
}

有什么可能导致页面以这种方式滚动以及如何解决它的想法？

Answer 1

问题在于，当您点击其他信息时，产品说明会折叠，从而导致页面中的元素向上移动，从而产生页面向下滚动的印象。

一个解决方案是获取元素的偏移量，如$（＆＃34;＃acctab-description＆＃34;），设置为某个变量，如下所示，var offset = $（＆＃34;＃acctab-description＆＃34;）。offset（）。top，然后使用window.scrollTo（0，offset）滚动到该高度，并将所有这些绑定到附加信息选项卡上的click事件。

这可能需要一些按摩来完全按照你喜欢的方式工作，并且肯定有其他方法可以完成同样的事情，但是，问题是，当你的页面滚动到底部时，问题并不是点击其他信息，其中页面元素向上移动以响应从设置为display的产品信息div中丢失的高度：none

Answer 2

感谢@ user2934565和@Bojan Petkovski的建议，我能够解决这个问题。

首先要意识到页面没有咔嚓一声。我能够在控制台中使用window.pageYOffset对此进行测试，以获得电流滚动位置。在点击#acctab-description标签时隐藏了#acctab-additional标签。这会在文档高度降低时创建页面滚动的错觉。

正如我在@ user2934565所建议的那样，我在选项卡的点击事件中添加了以下JavaScript，以将页面滚动到正确的位置。

    // 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');
        }
    });

是什么导致页面滚动

2 个答案: