我有这个输入元素:

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


当前回答

单线的,单线的

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插件。只需将属性scroll=添加到可单击元素中,并将其值设置为要滚动到的选择器。

像这样:<a scroll=“#product”>单击我</a>。它可以用于任何元素。

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

这是我使用通用类选择器抽象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>

jQuery(document).ready(函数($){$('a[href^=“#”]').bind('click.s平滑滚动',函数(e){e.预防违约();var目标=this.hash,$target=$(目标);$('html,body').stop().animate({“scrollTop”:$target.offset().top-40},900,'摆动',函数(){window.location.hash=目标;} );} );} );<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul role=“tablist”><li class=“active”id=“p1”><a href=“#pane1”role=“tab”>第1节</a></li><li id=“p2”><a href=“#pane2”role=“tab”>第2节</a></li><li id=“p3”><a href=“#pane3”role=“tab”>第3节</a></li></ul><div id=“pane1”></div><div id=“pane2”></div><div id=“pane3”></div>

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

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

如果只处理滚动到输入元素,则可以使用focus()。例如,如果要滚动到第一个可见输入:

$(':input:visible').first().focus();

或容器中第一个可见的输入,类为.error:

$('.error :input:visible').first().focus();

感谢Tricia Ball指出这一点!