我有这个输入元素:

  <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特性来实现这一点。


当前回答

$('html,body').animate(…)在iPhone、Android、Chrome或Safari浏览器中不适用。

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

$('#cotent').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');
}

所有正文内容都与#contentdiv连接

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

其他回答

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

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

这对我有用:

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

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

$(函数){//可在任何地方使用的通用选择器$(“.js滚动到”).click(函数(e){//动态获取hrefvar destination=$(this).attr('href');//阻止href=“#”链接更改URL哈希(可选)e.预防违约();//动画滚动到目的地$('html,body').animate({scrollTop:$(destination).offset().top}, 500);});});<!-- 固定导航菜单示例--><ul class=“nav”><li><a href=“#section-1”class=“nav item js scroll to”>项目1</a></li><li><a href=“#section-2”class=“nav item js scroll to”>项目2</a></li><li><a href=“#section-3”class=“nav item js scroll to”>项目3</a></li></ul>

单线的,单线的

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

subject.onclick=e=>window.sollow({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”>一些内容<textarea></textarea></div><input type=“submit”class=“submit”id=“submit“name=”submit“value=”Ok,Done“><div class=“foot”>一些页脚</div>

如果您对平滑滚动效果不太感兴趣,而只是对滚动到特定元素感兴趣,则不需要使用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'});