我有这个输入元素:

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

然后我还有一些其他元素,比如其他标签的&<textarea>标签等等。。。

当用户点击<input id=“#subject”>时,页面应该滚动到页面的最后一个元素,并且应该使用一个漂亮的动画(应该滚动到底部而不是顶部)。

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

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

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

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


当前回答

要显示整个元素(如果可以使用当前窗口大小):

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);

其他回答

如果您想在溢出容器中滚动(而不是上面回答的$('html,body')),同时使用绝对定位,这是一种方法:

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

container.animate({
  scrollTop: pos
}

jQuery.sollTo():视图-演示,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/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'});

使用此解决方案,您不需要任何插件,并且除了在关闭</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);
}

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

而且,每当您单击带有href哈希的链接(例如#top)时,我们都会滚动到它。

##编辑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();

截至2019年的更新答案:

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