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 ...
随机推荐
- spring启动找不到spring.liveBeansView.mbeanDomain配置
做项目时,启动tomcat报错 JNDI lookup for name [spring.liveBeansView.mbeanDomain] threw NamingException with m ...
- git解决冲突插件之Beyond Compare
Beyond Compare主要作用: 1. 可以比较文件.文件夹的差异: 2. 将一个文件或文件夹的两个不同版本进行变更合并,生成一个输出. 基于以上两个特性,可以将beyond compare集成 ...
- Python网络爬虫之requests模块
今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 知识点回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 ...
- linux安装python3 ,安装IPython ,安装jupyter notebook
安装python3 下载到 /opt/中 1.下载python3源码,选择3.6.7因为ipython依赖于>3.6的python环境wget https://www.python.org ...
- jmeter关联Websocket包支持
消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...
- （转）开放window是服务器端口——以8080为例
本文记录两个内容: 1.win7下打开端口 2.服务器(2003或者其他老版的系统以2003为例) 测试端口时 可用telnet 命令 侦听端口:C:\Documents and Settings\a ...
- wmware虚拟机的克隆
VMware 支持两种类型的克隆:完整克隆 链接克隆 完整克隆是和原始虚拟机完全独立的一个拷贝,它不和原始虚拟机共享任何资源.可以脱离原始虚拟机独立使用. 链接克隆需要和原始虚拟机共享同一虚拟磁盘文件 ...
- uva-317-找规律
无耻的抄袭了结果,三组数,从每一组数中选取一个数组成正六边形的对边,总共会有27个正六边形,从27个小六边形中选取19个组成大六边形,求大六边形的最大值 #include<iostream> ...
- python中的upper、lower、capitalize、title
upper()字符串中字母由小写变为大写 lower()字符串中字母由大写变为小写 capitalize()字符串中字母首字母大写其余小写 title()字符串中字母每个单词的首字母大写其余小写 举个 ...
- 36. Oracle查询数据库中所有表的记录数
select t.table_name,t.num_rows from user_tables t