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