jQuery 滚动到元素

我有这个input元素:

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

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

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

页面的最后一项是带有#submitsubmit按钮:

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

动画不应太快且应流畅。

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

答案

假设您有一个带有 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>

jQuery .scrollTo()方法

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 :动画完成后调用的函数。

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

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

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

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

使用这个简单的脚本

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

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

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>

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

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

例如:

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

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

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

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

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

如果仅处理滚动到输入元素,则可以使用focus() 。例如,如果要滚动到第一个可见输入,请执行以下操作:

$(':input:visible').first().focus();

或类.error的容器中的第一个可见输入:

$('.error :input:visible').first().focus();

感谢Tricia Ball指出了这一点!

使用此解决方案,您不需要任何插件,除了在关闭</body>标记之前放置脚本之外,不需要任何设置

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

加载时,如果地址中有哈希,我们将滚动至该哈希。

并且 - 每当您单击带有href哈希a链接(例如#top ,我们都会滚动到该链接。

我知道没有 jQuery 的方法:

document.getElementById("element-id").scrollIntoView();