这篇文章主要介绍了使用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,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 animate创建平滑滚动效果的更多相关文章

  1. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  2. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  4. 使用jQuery实现向上循环滚动效果（超简单）

    今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...

  5. 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用 <link href="css/jquery.slideBox.css" rel="stylesh ...

  6. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

  7. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  8. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. Jquery——简单的视差滚动效果，兼容PC移动端

    $(function(){     $(window).scroll(function(){         var top=$(this).scrollTop();        $(". ...

随机推荐

  1. Java for LeetCode 228 Summary Ranges

    Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

  2. loadrunner备忘

    1.超时设置 2. 可能是操作系统的环境不适合或者浏览器的版本有出入,具体的loadrunner版本支持的IE版本版本如下所示,请仔细核对是否正确.LR版本和IE版本兼容性问题,这个问题是我们安装环境 ...

  3. HttpClient 3.X 4.3 4.x超时设置

    HttpClient 4.3.HttpClient这货和Lucene一样,每个版本的API都变化很大,这有点让人头疼.就好比创建一个HttpClient对象吧,每一个版本的都不一样, 3.X是这样的 ...

  4. eclipse clear swtich workspace

    edit : --> D:\tools\eclipse\configuration\.settings\org.eclipse.ui.ide.prefs

  5. 使用vsphere client 克隆虚拟机

    免费的VMWare ESXi5.0非常强大,于是在vSphere5.0平台中ESXi取代了ESX.,使用ESXi经常会遇到这样的问题,我需要建立多个虚拟机,都是windows2003操作系统,难道必须 ...

  6. sendto : Permission denied

    遇到如题的问题,google了一番,找到了解决方法,写下来备用 问题: udp发送数据时候报错sendto error  : Permission denied 改正方法: 在创建了套接字后,加上下列 ...

  7. Codeforces Round #371 (Div. 2)(set\unique)

    B. Filya and Homework time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. Bootstrap学习（一）

    Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. 链接:http://www.cnblogs.com/vvjiang/p/5189804.h ...

  9. NYOJ题目34韩信点兵

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAHiCAIAAACV1MbSAAAgAElEQVR4nO3dPXLjONeG4W8TyrUQx1 ...

  10. self和parent的用法

    总结 self  , parent 的用法               只能用在类的内部 self  本类  (不要理解成本对象) parent 父类 在引入自身的静态属性/静态方法 以及父类的方法时 ...