问：

我有这个元素：input

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

然后我还有一些其他元素，比如其他标签和标签等......<textarea>

当用户单击时，页面应该滚动到页面的最后一个元素，并且应该有一个漂亮的动画（它应该滚动到底部而不是顶部）。<input id="#subject">

页面的最后一项是一个按钮，其中包含：submit#submit

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

动画不应太快，并且应该流畅。

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

javascript jquery 滚动

12赞 Christophe Roussy 12/9/2018

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

0赞 Jacksonkr 7/27/2019

scrollTo由于 chrome 插件而被我禁用，不确定是哪个。

0赞 Abhi 9/10/2021

stackoverflow.com/a/53873376/2968762 是最好的答案（因为也使用了 javascript 标签）。不知道为什么它被不必要地阻止了。

答：

4530赞 Steve 7/13/2011 #1

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

34赞 Jānis Elmeris 4/25/2012

这并非在所有情况下都有效。查看 stackoverflow.com/questions/2905867/...

82赞 Rory O'Kane 9/21/2013

如果您不想要动画，而是想要立即跳转到元素，请使用 .scrollTop（...） 而不是 ..animate({scrollTop: …}, …)

1赞 ScriptKiddieOnAComputer 7/18/2021

如果您正在尝试阅读该文章，这里有一个工作链接：在没有jQuery插件的情况下平滑滚动到元素

0赞 WASasquatch 4/3/2022

由于某种原因，当我使用此方法时，滚动被锁定在该位置。我无法在其他任何地方滚动。

0赞 Hossein Badrnezhad 11/14/2023

如果我们想将对话框元素滚动到其中的元素，我们可以将 $（'html， body'）更改为我们的 $（“#id_of_dialog”）。

568赞 Timothy Perez 10/5/2012 #2

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

16赞 kiranvj 7/6/2013

$（'body'）在 FF 中不起作用，所以尝试了 $（'html， body'）它有效。

9赞 Arturs 11/7/2013

如果有人需要这个脚本源，那么你可以在这里得到它 flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

0赞 Black 10/17/2022

我得到scrollTo is not a function

59赞 Warface 9/5/2013 #3

使用这个简单的脚本

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

如果在 url 中找到哈希标签，则 scrollTo 会对 ID 进行动画处理。如果未找到哈希标记，则忽略该脚本。

487赞 Atharva 12/24/2013 #4

如果你对平滑滚动效果不太感兴趣，只对滚动到一个特定的元素感兴趣，你不需要一些jQuery函数。Javascript 已经涵盖了您的案例：

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

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

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

更新

现在可以通过动画滚动，传递滚动选项（参见 MDN）。您甚至可以控制块位置。除了Safari之外，它似乎有很大的支持

$("selector").get(0).scrollIntoView({behavior: 'smooth'});

17赞 RobW 3/18/2014

你也可以用吗？$(selector)[0]

19赞 corbacho 4/2/2014

RobW，是的，你可以只使用 [0]，但 get（0）可以保护你免受未定义或负索引的影响。查看来源：james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

25赞 Gavin 6/24/2014

如果您根本不想使用 jQuery，只需使用 .加载一个 ~100k 库只是为了选择一个元素，然后将其转换为常规 JavaScript 是没有用的。document.getElementById('#elementID').scrollIntoView()

79赞 Brian 9/19/2014

@Gavin 我敢肯定你的意思是：document.getElementById('elementID').scrollIntoView()

0赞 Avatar 5/26/2022

如果能够定义偏移量就好了......stackoverflow.com/q/24665602/1066234

42赞 Tejasvi Hegde 2/6/2014 #5

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

但在某些情况下，您可能需要将该值转换为整数。奇怪的是，从返回的值有时在中。
用：$("...").offset().topfloatparseInt($("....").offset().top)

例如：

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

4赞 user669677 2/12/2014 #6

$('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);

4赞 Roman Shamritskiy 3/25/2014 #7

要显示完整元素（如果当前窗口大小可能），请执行以下操作：

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

47赞 davidcondrey 7/19/2014 #8

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>

1赞 bubencode 8/12/2018

为了使其更加通用并删除不必要的主题标签在浏览器链接窗口中的位置，我只是调整了代码，如下所示：

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

24赞 Rezgar Cadro 8/29/2014 #9

“动画”解决方案的精简版本。

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

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

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

18赞 Benjamin Oakes 1/29/2015 #10

如果仅处理滚动到输入元素，则可以使用 .例如，如果要滚动到第一个可见的输入：focus()

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

或者容器中的第一个可见输入，类为：.error

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

感谢 Tricia Ball 指出这一点！

7赞 vascogaspar 6/22/2015 #11

这是我使用泛型类选择器抽象 ID 和 href 的方法

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

4赞 kayz1 7/3/2015 #12

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

8赞 hashchange 8/17/2015 #13

在大多数情况下，最好使用插件。认真地。我要在这里吹捧我的。当然，还有其他的。但是请检查它们是否真的避免了您首先想要插件的陷阱 - 并非所有陷阱都避免了。

我已经写过关于在其他地方使用插件的原因。简而言之，这里支撑大多数答案的一句话

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

用户体验不好。

动画不响应用户操作。即使用户单击、点击或尝试滚动，它也会继续。
如果动画的起点靠近目标元素，则动画速度会非常慢。
如果目标元素放置在页面底部附近，则无法将其滚动到窗口顶部。滚动动画在运动中突然停止。

要处理这些问题（以及许多其他问题），您可以使用我的插件jQuery.scrollable。然后，呼叫变为

$( window ).scrollTo( targetPosition );

就是这样。当然，还有更多选择。

关于目标职位，在大多数情况下都能完成工作。但请注意，返回的值没有考虑元素的边框（请参阅此演示）。如果在任何情况下都需要目标位置准确，最好使用$target.offset().tophtml

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

即使设置了元素的边框，这也有效。html

3赞 isapir 11/19/2015 #14

我编写了一个通用函数，可以滚动到 jQuery 对象、CSS 选择器或数值。

用法示例：

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

函数代码：

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

3赞 Khaled.K 11/28/2015 #15

当用户 #subject 单击该输入时，页面应滚动到带有漂亮动画的页面的最后一个元素。它应该是滚动到底部而不是顶部。

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

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

这将首先向下滚动，然后将光标恢复到单击的输入，这模仿向下滚动，适用于大多数浏览器。它也不需要jQuery，因为它可以用纯JavaScript编写。#submit

这种使用函数的方式能否通过链接调用以更好的方式模仿动画。我还没有测试过这个理论，但它看起来像这样：focusfocus

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

7赞 DevWL 1/11/2016 #16

非常简单易用的自定义jQuery插件。只需将该属性添加到可点击元素中，并将其值设置为要滚动到的选择器即可。scroll=

这样：。它可以用于任何元素。<a scroll="#product">Click me</a>

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

2赞 martinh_kentico 2/26/2016 #17

就其价值而言，这就是我设法为一个可以在滚动的 DIV 内部的一般元素实现这种行为的方式。在我们的例子中，我们不滚动整个身体，而只是滚动带有溢出的特定元素：auto;在更大的布局中。

它创建一个目标元素高度的假输入，然后将焦点放在它上面，无论您在可滚动层次结构中有多深，浏览器都会处理其余部分。像魅力一样工作。

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

21赞 Jonathan 8/3/2016 #18

使用此解决方案，您不需要任何插件，除了将脚本放在结束标签之前之外，无需进行任何设置。</body>

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

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

加载时，如果地址中有哈希值，我们会滚动到它。

而且 - 每当您单击带有哈希值的链接时，例如，我们都会滚动到它。ahref#top

##Edit 2020

如果你想要一个纯粹的JavaScript解决方案：你也许可以使用类似的东西：

var _scrollToElement = function (selector) {
  try {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
  } catch (e) {
    console.warn(e);
  }
}

var _scrollToHashesInHrefs = function () {
  document.querySelectorAll("a[href^='#']").forEach(function (el) {
    el.addEventListener('click', function (e) {
      _scrollToElement(el.getAttribute('href'));
      return false;
    })
  })
  if (window.location.hash) {
    _scrollToElement(window.location.hash);
  }
}

_scrollToHashesInHrefs();

3赞 svnm 11/23/2016 #19

我设置了一个模块 scroll-element 。它的工作原理如下：npm install scroll-element

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

在以下 SO 帖子的帮助下编写：

代码如下：

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

8赞 Shahdat 1/4/2017 #20

$('html, body').animate(...)在 iPhone、Android、Chrome 或 Safari 浏览器中对我不起作用。

我必须以页面的根内容元素为目标。

$（'#content'）.animate（...）

这是我最终得到的：

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

所有身体内容都与 #content div 连接

<html>
    ....
    <body>
        <div id="content">
        ...
        </div>
    </body>
</html>

0赞 Alex Podworny 2/11/2017

您真的不应该使用用户代理嗅探。webaim.org/blog/user-agent-string-history

0赞 daliaessam 4/7/2019

添加分词符：break-all;到你有问题的CSS元素。Android/iOS webview jQuery.animate（{scrollTop： y}）位置不正确。medium.com/@ellery.leung/......

9赞 user7601056 2/27/2017 #21

动画：

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

11赞 FAjir 9/23/2017 #22

如果你想在一个溢出容器内滚动（而不是上面回答），同时使用绝对定位，这是这样做的方法：$('html, body')

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

12赞 Irshad Khan 10/10/2017 #23

实现页面滚动到目标 div id 的简单方法

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

4赞 cynya 9/22/2018 #24

这是 Atharva 的回答：https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView。只是想添加一下，如果你的文档在iframe中，你可以在父框架中选择一个元素来滚动到视图中：

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

2赞 Polaris 11/7/2018 #25

这对我有用：

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

105赞 object-Object 12/21/2018 #26

这可以在没有jQuery的情况下实现：

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

0赞 Herbert Van-Vliet 10/26/2023

$（'#elementid'）[0].scrollIntoView（）？鸭子

3赞 stardust4891 1/18/2019 #27

截至 2019 年更新的答案：

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

0赞 ali6p 11/19/2019

您应该为 body 选择器：[document.documentElement， document.body] AND 等式中不需要正文偏移量。$（'#subject'）.offset（）.top 就足够了。

2赞 Minguocode 3/19/2019 #28

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>

44赞 Edvard Åkerberg 6/20/2019 #29

这就是我的做法。

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

适用于任何浏览器。

它可以很容易地包装成一个函数

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

下面是一个工作示例

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

文档

7赞 OG Sean 8/4/2019

很短很甜。需要注意的一点 - 我认为这只会将其滚动到视图中（可能在视口的底部），而不是像设置 scrollTop 那样将其滚动到视口的顶部。

0赞 informatik01 7/31/2021

我也使用了这个解决方案，但至少 Chrome 版本 92 由于某种原因默认禁用了平滑滚动，所以这个解决方案不再起作用（在撰写本文时）。实际上相当令人失望。它仍然可以通过为配置选择“启用”（而不是“默认”）来手动启用。chrome://flags/#smooth-scrolling

4赞 Kamil Kiełczewski 1/8/2020 #30

ONELINER公司

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior:'smooth'});

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

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

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>

2赞 Jaber Alshami 8/13/2020 #31

您只需要：

$("selector").get(0).scrollTo(0, 0)

1赞 Julien Jacobs 8/13/2020

你可以将它与选项一起使用，以平滑滚动，如 element.scrollTo（{ top： 100， left： 100， behavior： 'smooth' }）;查看 developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

0赞 Nico Haase 8/13/2020

请在您的答案中添加一些解释，以便其他人可以从中学习。

0赞 Andrey Artemyev 10/12/2020

这很简单。“内部”每个jQuery对象都有简单的javascrip元素。您可以通过 .get 方法（api.jquery.com/get/#get-index）或简单地调用 [0]： $（“selector”）.get（0） of $（“selector”）[0] 来访问它。你会得到 JS 元素，就像你通过 document.getElementById（“selector_id”）得到它一样。因此，您可以调用任何 JS 函数，例如 scrollTo 或 scrollIntoView。

10赞 Vu Viet Hung 8/26/2020 #32

在找到让我的代码工作的方法之后，我想我应该把事情说清楚一点：用于：

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

您需要在页面顶部，因为会为您滚动到的不同位置返回不同的数字。如果您已经从顶部滚动出来，则需要指定确切的值（请参阅此处的定义：https://javascript.info/coordinates）。$("#div1").offset().toppageYpageY

所以现在的问题是计算一个元素的值。下面是一个示例，如果滚动容器是正文：pageY

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

即使您在某处滚动，上述函数也会返回相同的数字。现在，滚动回该元素：

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");

0赞 YanAlex 5/11/2023 #33

会解决问题，但会改变你的哈希值。如果您使用 Jquery 选项卡并希望页面滚动到选项卡标题，您可以：

$('#needed_tab').tab('show');
window.location.hash = '#tabs_block';

上一个：如何使用 JavaScript 刷新页面？

下一个：在jQuery中添加表行

使用 jQuery 滚动到元素

Scroll to an element with jQuery

评论

评论

评论

更新

评论

评论

评论

评论

评论

评论

评论