加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 23:42:08 所属栏目:资源 来源:网络整理
导读:采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。 滚动到顶部: 复制代码 代码如下: $('.scroll_top').click(function(){$('html,bod

采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box bottom"></div>

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

您可能感兴趣的文章:

  • Vue中正确使用jQuery的方法
  • jquery在vue脚手架中的使用方式示例
  • vue单页应用中如何使用jquery的方法示例
  • 详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
  • vue中如何引入jQuery和Bootstrap
  • jQuery实现将div中滚动条滚动到指定位置的方法
  • jQuery实现在textarea指定位置插入字符或表情的方法
  • js,jquery滚动/跳转页面到指定位置的实现思路
  • 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
  • JQuery简单实现锚点链接的平滑滚动
  • jQuery实现平滑滚动到指定锚点的方法
  • jQuery 锚点跳转滚动条平滑滚动一句话代码
  • Vue引入jquery实现平滑滚动到指定位置

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读