问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用 jQuery 滚动到一个元素

社区维基
1
新手上路，请多包涵

我有这个 input 元素：

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

然后我有一些其他元素，比如其他标签的 & <textarea> 标签等…

当用户单击 <input id="#subject"> 时，页面应该滚动到页面的最后一个元素，并且应该使用漂亮的动画 （应该是滚动到底部而不是顶部） 。

页面的最后一项是带有 submit 的 #submit 按钮：

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

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

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

原文由 DiegoP. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryscroll
阅读 998
2 个回答
得票最新
社区维基
1
✓ 已被采纳

假设你有一个 id 为 button 的 button ，试试这个例子：

 $("#button").click(function() {
 $([document.documentElement, document.body]).animate({
 scrollTop: $("#elementtoScrollToID").offset().top
 }, 2000);
 });

我从文章 Smoothly scroll to an element without a jQuery plugin 中得到了代码。我已经在下面的示例中对其进行了测试。

 <html>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script>
 $(document).ready(function (){
 $("#click").click(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>

原文由 Steve 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

jQuery .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 ：定义滚动目标上方额外间距的数字。

duration ：一个字符串或数字，确定动画将运行多长时间。

easing ：一个字符串，指示用于过渡的缓动函数。

complete ：动画完成后调用的函数。

原文由 Timothy Perez 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题