我有这个输入元素:

  <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({
   scrollTop: $("#div1").offset().top
}, 2000);

您需要在页面顶部,因为$(“#div1”).offset().top将为您滚动到的不同位置返回不同的数字。如果您已经滚动到顶部,则需要指定确切的pageY值(请参阅此处的pageY定义:https://javascript.info/coordinates).

现在,问题是计算一个元素的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");

其他回答

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

假设您有一个带有id按钮的按钮,请尝试以下示例:

$("#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><脚本>$(文档).ready(函数(){$(“#click”).click(函数(){$('html,body').animate({scrollTop:$(“#div1”).offset().top}, 2000);});});</script><div id=“div1”style=“height:1000px;width 100px”>测验</div><br/><div id=“div2”style=“height:1000px;width 100px”>测试2</div><button id=“click”>单击我</button></html>

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

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

在找到了让我的代码工作的方法之后,我想我应该把事情弄清楚一点:用于:

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

您需要在页面顶部,因为$(“#div1”).offset().top将为您滚动到的不同位置返回不同的数字。如果您已经滚动到顶部,则需要指定确切的pageY值(请参阅此处的pageY定义:https://javascript.info/coordinates).

现在,问题是计算一个元素的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");

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