jQuery滚动到元素 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我有这个input元素：

<input type="text" class="textfield" value="" id="subject" name="subject">

然后，我还有其他一些元素，例如其他文本输入，文本区域等。

当用户使用#subject单击该input时，页面应滚动到页面上具有精美动画的最后一个元素。它应该是滚动到底部而不是顶部。

页面的最后一项是带有#submit的submit按钮：

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

动画不应太快且应流畅。

我正在运行最新的jQuery版本。我更喜欢不安装任何插件，而是使用默认的jQuery功能来实现此目的。

#1楼

jQuery .scrollTo（）：查看-演示，API，源

我写了这个轻量级的插件，以使页面/元素滚动更加容易。在可以传递目标元素或指定值的地方，它很灵活。也许这可能是jQuery的下一个正式版本的一部分，您认为呢？

用法示例：

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

选项：

scrollTarget ：一个元素，字符串或数字，指示所需的滚动位置。

offsetTop ：一个数字，用于定义滚动目标上方的其他间距。

duration ：一个字符串或数字，确定动画将运行多长时间。

easing ：一个字符串，指示要在过渡中使用哪个缓动函数。

complete ：动画完成后调用的函数。

#2楼

使用这个简单的脚本

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

将进行排序，以确保如果在url中找到了哈希标记，则scrollTo会动画化为ID。如果未找到哈希标记，则忽略脚本。

#3楼

如果您对平滑滚动效果不太感兴趣，而仅对滚动到特定元素感兴趣，则不需要为此使用某些jQuery函数。 Javascript已解决您的问题：

https://developer.mozilla.org/zh-CN/docs/Web/API/element.scrollIntoView

因此，您所需要做的就是： $("selector").get(0).scrollIntoView();

.get(0)是因为我们要检索JavaScript的DOM元素而不是JQuery的DOM元素。

#4楼

史蒂夫和彼得的解决方案效果很好。

但是在某些情况下，您可能必须将值转换为整数。奇怪的是， $("...").offset().top返回的值有时在float 。
使用： parseInt($("....").offset().top)

例如：

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

#5楼

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3151206

标签

scrollto

jquery