jquery滚动条平滑滑动
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。
滚动到顶部：
滚动到指定位置：
完整实例源码参考：
<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滚动条平滑滑动的更多相关文章
- 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- Jquery实现特效滑动菜单栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- Perfect Scrollbar – 完美的 jQuery 滚动条插件
Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- 原创新闻 11 个最佳 jQuery 滚动条插件
通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...
- 15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...
随机推荐
- ubuntu 16042 安装过程
IDE接口的硬盘被称为hd SCSI和SATA接口的硬盘则被称为sd 第1块硬盘称为sda, 第2块硬盘称为sdb 一块硬盘最多有4个主分区,主分区以外的分区称为扩展分区,硬盘可以没有扩展分区,但是一 ...
- 事件冒泡及事件委托的理解（JQuery Dom操作）
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- uva-10341-二分法
题意:已知方程的根在0-1范围内,求解方程的根,如果方程不存在根,那就输出 no solution. 直接二分,保留四位小数. #include "pch.h" #include ...
- Windows2008R2安装Exchange 2010前必须要做的准备工作
由于WindowsServer2008R2已经包含了KB979099.KB982867.KB979744.KB983440.KB977020这些补丁的内容,所以无须另外下载安装. 详见https:// ...
- 代码：css3动画效果demo
四行文字会逐次掉落: 如果要停留在最后一帧的动画,注意要用forwards,不要用both. <style type="text/css"> @-webkit-key ...
- AspxGridView使用手记
AspxGridView使用手记 一. 基本使用方法 4 1.导入Dll文件 4 2.Asp.Net页面控件注册 4 3. Asp.Net页面控件声明 5 4.删除licenses. ...
- c++Builder debug DataSet Visualizer
c++Builder debug DataSet Visualizer delphi 正常,c++builder报错. fdMemTable->SaveToFile("d:\\DSdb ...
- CentOS 7.0安装配置Vsftp服务器步骤详解
安装Vsftp讲过最多的就是在centos6.x版本中了,这里小编看到有朋友写了一篇非常不错的CentOS 7.0安装配置Vsftp服务器教程,下面整理分享给各位. 一.配置防火墙,开启FTP服务器需 ...
- day41-解决粘包问题
一.socket缓冲区 研究粘包之前先看看socket缓冲区的问题: 二.socket缓存区的详细解释 每个socket被创建后,都会分配两个缓冲区,输入缓冲区和输出缓冲区. write()/send ...
- tips___代码规范
函数变量尽可能置于最小作用域内,并在变量声明时进行初始化 变量声明的位置最好离第一次使用的位置越近越好:应使用初始化的方式代替声明再赋值. int x=0; rather than int x; x ...