jquery - jQuery滚动到元素

  显示原文与译文双语对照的内容

我有这个输入元素:


<input type="text" class="textfield" value="" id="subject" name="subject">

然后我还有其他一些元素,比如其他文本输入,textareas等。

当用户单击输入 #subject 时,页面应该滚动到页面的最后一个元素,并具有漂亮的动画。 它应该是滚动到底部而不是顶部。

页面的最后一项是一个提交按钮:


<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

动画不应该太快,应该是流畅的。

我正在运行最新的jQuery版本。 我宁愿不安装任何插件,而是使用默认的jQuery功能来实现这个功能。

时间:

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


$("#button").click(function() {
 $('html, body').animate({
 scrollTop: $("#elementtoScrollToID").offset().top
 }, 2000);
});

我得到了文章 的代码顺利滚动到一个元素,没有jQuery插件 。 我已经在下面的例子中对它进行了测试。


<html>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script>
 $(document).ready(function (){
 $("#click").click(function (){
//$(this).animate(function(){
 $('html, body').animate({
 scrollTop: $("#div1").offset().top
 }, 2000);
//});
 });
 });
 </script>
 <div id="div1" style="height: 1000px; width 100px">
 Test
 </div>
 <br/>
 <div id="div2" style="height: 1000px; width 100px">
 Test 2
 </div>
 <button id="click">Click me</button>
</html>

jQuery. scrollTo() Method

.scrollTo(): 视图- 演示,API,源代码

我编写了这个轻量级插件,使页面/元素滚动更加容易。 在你可以传递目标元素或者指定值的地方是灵活的。 这可能是jquery官方发行版的一部分,你觉得?


例子用法:


$('body').scrollTo('#target');//Scroll screen to target element

$('body').scrollTo(500);//Scroll screen 500 pixels down

$('#scrollable').scrollTo(100);//Scroll individual element 100 pixels down


磅选项:

scrollTarget: 一个元素,字符串或者数字,表示所需的滚动位置。

offsetTop: 上面一个数字,它定义了额外的间隔滚动目标。

持续时间: 确定动画运行时间的字符串或者数字。

于该transition,相关缓动,即一个字符串显示哪种缓动函数来。

完成 : 一个函数来调用一旦动画已经完成。

查看 ScrollTo 插件插件。 你可以在这里看到演示

希望有帮助。

使用这里简单脚本


if($(window.location.hash).length> 0){
 $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

将在排序中进行排序,如果在url中找到了一个散列标记,那么scrollTo会对标识进行动画处理。 如果未找到哈希标记,则忽略脚本。


<script>
jQuery(document).ready(function($) {
 $('a[href^="#"]').bind('click.smoothscroll',function (e) {
 e.preventDefault();
 var target = this.hash,
 $target = $(target);

 $('html, body').stop().animate( {
 'scrollTop': $target.offset().top-40
 }, 900, 'swing', function () {
 window.location.hash = target;
 } );
 } );
} );
</script>

<ul role="tablist">
 <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
 <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
 <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

Steve和Peter的解决方案很好。

但在某些情况下,你可能需要将该值转换为整数。 奇怪的是,$("...").offset().top 返回的值有时是浮点数。

用法:parseInt($("...."). offset().top )

例如:


$("#button").click(function() {
 $('html, body').animate({
 scrollTop: parseInt($("#elementtoScrollToID").offset().top)
 }, 2000);
});

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


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

或者第一个在类 .error 中的可见输入:


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

感谢 Tricia的球指出这点 !

"动画"解决方案的紧凑版本。


$.fn.scrollTo = function (speed) {
 if (typeof(speed) == 'undefined')
 speed = 1000;

 $('html, body').animate({
 scrollTop: parseInt($(this).offset().top)
 }, speed);
};


$('html, body').animate({scrollTop: 
 Math.min( 
 $(to).offset().top-margintop,//margintop is the margin 上面 the target
 $('body')[0].scrollHeight-$('body').height())//if the target is at the bottom
}, 2000);

...