题 jQuery滚动到元素


我有这个 input 元件:

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

然后我有一些其他元素,如其他文本输入,textareas等。

当用户点击它时 input 同 #subject,页面应滚动到页面的最后一个元素,并带有漂亮的动画。它应该是一个滚动到底部而不是顶部。

该页面的最后一项是 submit 按钮 #submit

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

动画不应该太快,应该是流畅的。

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


1875
2017-07-13 09:49


起源




答案:


假设你有一个带id的按钮 button,试试这个例子:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

我从文章中得到了代码 无需jQuery插件即可平滑滚动到元素。我在下面的例子中对它进行了测试。

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3481
2017-07-13 09:52



这并不适用于所有情况。看到 stackoverflow.com/questions/2905867/... - Jānis Elmeris
@BarryChapman不完全是。谷歌搜索后我发现了 这个,如果您不希望每种浏览器类型都有额外的逻辑,则需要两个标记。 - s3m3n
如果您不想要动画,而是想立即跳转到该元素,请使用 .scrollTop(…)代替 .animate({scrollTop: …}, …)。 - Rory O'Kane
除了你的解决方案(效果很好)之外,你还可以添加一个完整的功能,将主题标签添加到网址中。在这种情况下,它不会滚动,因为scrollTo已经滚动到正确的位置,如果用户复制了URL,它将自动捕捉到页面上的正确位置。 - Sander
如果你在动画完成时使用回调来运行并注意回调用这个解决方案触发两次,请尝试使用“$('html body')。animate(...”而不是“$('html,body') .animate(...“逗号创建了两个动画事件。一个用于html,一个用于body。你真的只想要一个用于html的身体谢谢@TJ Crowder stackoverflow.com/questions/8790752/... - BoatCode


  jQuery .scrollTo() Method 

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:一个数字,用于定义滚动目标上方的其他间距。

持续时间:确定动画运行时间的字符串或数字。

缓解:一个字符串,指示要用于转换的缓动函数。

完成:动画完成后调用的函数。


454
2017-10-05 08:50



该演示不适用于chrome - alex
它一直在工作,直到最近有关chrome的更新。我有一个版本,我目前正在memoryboxweddings.com/photography-posts上使用(如果你想尝试一下)。一旦修好,我会发布更新。 - Timothy Perez
@TimothyPerez:我确信这意味着商业用途的许可?我确信有很多人想在他们的网站上的任何地方使用那段代码,这有助于他们在晚上睡得更轻松一点?也许MIT许可证可能适合您的需求? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$('body')在FF中不起作用,所以尝试了$('html,body')。 - kiranvj
如果有人需要这个脚本源,那么你可以在这里得到它 flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


如果你对平滑滚动效果不太感兴趣并且只想滚动到特定元素,那么你不需要一些jQuery函数。 Javascript已涵盖您的案例:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

所以你需要做的就是: $("selector").get(0).scrollIntoView(); 

.get(0) 之所以使用是因为我们想要检索JavaScript的DOM元素而不是JQuery的DOM元素。


271
2017-12-24 11:35



谢谢,你能否给出JavaScript和JQuery的DOM元素之间的差异。 - Francisco Corrales Morales
你也可以用吗? $(selector)[0]? - RobW
RobW,是的,您可以使用[0],但get(0)可以保护您免受未定义或负索引的影响。看来源: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
如果您根本不想使用jQuery,只需使用即可 document.getElementById('#elementID').scrollIntoView()。没有用于加载~100k库只是为了选择一个元素然后将其转换为常规JavaScript。 - Gavin
@Gavin我相信你的意思是: document.getElementById('elementID').scrollIntoView() - Brian


看看 ScrollTo 插入。你可以看到演示 这里

我希望它有所帮助。


42
2017-07-13 11:05



我认为值得注意的是,TimothyPerez的插件仅限于y轴,而Ariel Flesler(在此答案中链接)更像是支持x和y滚动的厨房水槽,例如当出现模态对话框时,这一点很重要在移动设备上,或在移动设备上引起对广泛表格或表格的特定部分的关注。 - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





使用这个简单的脚本

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

如果在url中找到了一个hash标签,那么scrollTo会动画到ID。如果未找到哈希标记,则忽略该脚本。


26
2017-09-05 11:53





史蒂夫和彼得的解决方案非常有效。

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

例如:

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

15
2018-02-06 15:39





紧凑版“动画”解决方案。

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

基本用法: $('#your_element').scrollTo();


15
2017-08-29 11:19