当前位置: 首页 > 编程笔记 >

使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)

朱明知
2023-03-14
本文向大家介绍使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方),包括了使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)的使用技巧和注意事项,需要的朋友参考一下

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。

滚动到顶部:

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置:

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


完整实例源码参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js平滑滚动到顶部、底部、指定地方</title>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style>
 .box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
 .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
</style>
</head>

<body> <div></div> <div></div> <div></div> <div></div> <div>产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> <div></div> <div></div> <div></div> <div></div> <div></div>

<div>   <p>返回顶部</p>   <p>产品介绍</p>   <p>滑到底部</p> </div> <script type="text/javascript">  jQuery(document).ready(function($){   $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});   $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});   $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});  }); </script> </body> </html>

 类似资料:
  • 本文向大家介绍jquery平滑滚动到顶部插件使用详解,包括了jquery平滑滚动到顶部插件使用详解的使用技巧和注意事项,需要的朋友参考一下 点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图: 关键代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jquery滚动到顶部底部代码,包括了jquery滚动到顶部底部代码的使用技巧和注意事项,需要的朋友参考一下 HTML JS代码 以上所述就是本文的全部代码了,希望大家能够喜欢。

  • 如何在android应用程序中使用滑动滚动至底部?我试着用 但上述情况并没有起到任何作用。有人能给我推荐一些通用的解决方案吗?

  • 我有一个按钮,当点击应该平滑地滚动到顶部。平稳过渡并不奏效。现场网站。-->http://acetronaut.com 这里还有一个代码页。不管用。https://codepen.io/anon/pen/lbpwrv HTML: CSS: jQuery:

  • 本文向大家介绍android scrollview 自动滚动到顶部或者底部的实例,包括了android scrollview 自动滚动到顶部或者底部的实例的使用技巧和注意事项,需要的朋友参考一下 android scrollview 自动滚动到顶部或者底部 摘要: android scrollview 自动滚动到顶部或者底部 android scrollview 自动滚动到顶部或者底部  还有一种

  • 我有第10个项目作为列表视图中可见的顶部。我需要平滑滚动到顶部的项目。当我执行以下操作时,它只是停留在从顶部开始的第6个项目左右,不会滚动到顶部。