jQuery - 没有动画的 ScrollTop答案

【问题标题】：jQuery - ScrollTop without animationjQuery - 没有动画的 ScrollTop
【发布时间】：2012-04-25 23:41:48
【问题描述】：

如何在没有动画的情况下使用滚动条

此代码有效：

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 400);

这是我的（无效的解决方案）：

$("#mainCt").scrollTop('+=' + offTop + 'px');                 // doesn't work
$("#mainCt").scrollTop('+='+offTop);                          // doesn't work
hhh = setTimeout(' $("#mainCt").scrollTop('+offTop+');',800); // doesn't work

演示
http://jsfiddle.net/DNNFF/9/

【问题讨论】：

标签： jquery animation scroll scrolltop

【解决方案1】：

试试这个：

var offTop = $('#box').offset().top - 43;
$('#mainCt').scrollTop(offTop);

scrollTop 属性只接受一个整数，不需要后缀或单位。

【讨论】：

在这里可以正常工作：jsfiddle.net/wNehJ您的控制台中是否有任何错误？
当你向下滚动一点时？编辑：玩它，它不起作用（我检查了 Firefox 和 chrome 上的代码）
我认为这是因为您的示例中没有 #box 元素
-> $(this).after('
content
');
呃，对不起。我显然需要更好的眼镜。

【解决方案2】：

也许如果你不想要动画或任何花哨的东西，只需使用锚点

<a name="top"></a>

把它放在你需要滚动的地方

在你调用的函数中使用

document.location.href="#top";

您还可以创建一个函数来在元素之前附加锚点，执行document.location 的操作，然后删除该锚点。

http://jsfiddle.net/fSrxr/1/

【讨论】：

这行得通，但是我如何在没有动画的情况下使用 jQuery ScrollTop？
虽然这个答案“有效”，但它与浏览器历史记录相混淆。 $(element).scrollTop(offset) 更适合在没有动画的情况下重新定位，并且不会弄乱浏览器历史记录。特别是 $(window).scrollTop(offset) 用于在手风琴加载后重新定位 jQuery UI Accordion 部分。

【解决方案3】：

跳过 jQuery。只需使用 JavaScript：

window.scroll(0, 0);

【讨论】：

【解决方案4】：

http://api.jquery.com/scrollTop/

$(window).scrollTop(offTop)

【讨论】：

如果 mainCt 是一个带有滚动条的层 (overflow:auto) 那么你可以在 mainCt 上使用它。如果要滚动浏览器视口，则必须使用 window.
对，mainCt 是一个div，带有overflow-x: hidden;溢出-y：滚动；

【解决方案5】：

为什么不使用更短的持续时间。我摆弄它，它没有动画。既然没时间看动画，就根本没有动画。

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 50); //50 added here as duartion

【讨论】：

不回答问题。

【解决方案6】：

你不能玩时长吗？

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').delay('800').animate({scrollTop: '+=' + offTop + 'px'}, 1);

【讨论】：

我可以，但是这个解决方案有点脏：/
不回答问题。

【解决方案7】：

使用 jQuery 在刷新页面上保持位置的演示：

//------KEEP SCROLL POSITION
        $(window).scroll(function () {
            sessionStorage.scrollTop = $(this).scrollTop();
        });
        $(document).ready(function () {
            if (sessionStorage.scrollTop != "undefined") {
                setTimeout(() => window.scrollTo({
                    top: sessionStorage.scrollTop,
                    left: 0,
                    behavior: 'auto'
                }), 5);
            }
        });

【讨论】：

【解决方案8】：

var offTop = $('#box').offset().top;
$(window).scrollTop(parseInt(offTop))

【讨论】：