使用jquery滚动到元素

问题描述 投票:0回答:6

jquery中有scrollTop方法,但我想要一个scrollBottom方法。

我的用例是,用户单击某个元素的右上角,并且在网站深处的某处有元素#test,我想滚动到底部,以便用户可以看到该元素。

你会怎么做?我知道有一个 jquery rollTo 插件,推荐使用吗?这么简单的任务?...

更新

我已经用代码示例更新了我的问题,该代码示例部分取自上面的“jquery 滚动到元素”欺骗投票:

var container = $('#view');
var scrollTo = $('#test');

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});

这些是我调试得到的值,滚动底部不起作用,屏幕静止不动。

scrollTo.offset().top => 0
container.offset().top => 274.75
container.scrollTop() => 0

我的元素 row1 是这样的,所以我猜在顶部 1500px 但问题可能是它没有顶部值...我该如何解决这个问题?

jquery scroll
6个回答
1
投票

你可以试试这个

var p = $("#test");
var offset = p.offset();
$("body").scrollTop(offset.top);

0
投票

我从你的问题中了解到的是,你想滚动到页面底部,所以你可以使用这个:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

如果您想滚动到特定 ID,您可以使用此:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

0
投票
$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 2000);
});

0
投票
$("your element on which, if user clicks the scrolling shall proceed").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

我希望这能满足您的要求。


0
投票

查看我的十行 jQuery 插件(未压缩)。它可以做你想做的事,甚至更多,尽管它很简单

https://github.com/Samer-Al-iraqi/Simple-jQuery.scrollTo

作为 jQuery 实用程序:

$.scrollTo(to, duration, func);

或作为 jQuery 原型的扩展:

$('selector').scrollTo(duration, func);

第一种形式中的

to
部分可以接受多个像素、jQuery 选择器字符串、
end
单词(滚动页面末尾)、元素或 jQuery 对象。

希望它能帮助别人。


0
投票

HTML

<body>
  <div style="height:2500px">
      <button class="Top" id="button1" >1</button>
  </div>
      <button class="Link" id="button1" >2</button>
</body>

脚本

  $('.Top').click(function () {
     $('html, body').animate({scrollTop:$(document).height()}, 'slow');
     return false;
  });

  $('.Link').click(function () {
   $('html, body').animate({scrollTop:0}, 'slow');
   return false;
  });

按照这个小提琴并查看实例

http://jsfiddle.net/Ur3Dv/

© www.soinside.com 2019 - 2024. All rights reserved.