我有这个输入元素:

  <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 targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

其他回答

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

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

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

值得一提的是,这就是我如何为可以在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();

我编写了一个通用函数,可以滚动到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);
};

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