正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差。

这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转。

1首先,导入必须的JS文件

 <script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/jquery.ba-bbq.js"></script>

2我们可以这样来调用插件

$('a').smoothScroll({});

3可以根据自己的需要指定一个外部容器,那么滚动就是在这个(#container)容器内发生,而不是在页面级别发生了

$('#container a').smoothScroll();

4我们可以可以通过下面的方式来排除指定容器的包含元素

$('#container a').smoothScroll({
excludeWithin: ['.container2']
});

5通过下面的语句来排除满足指定条件的元素

$('a').smoothScroll({
exclude: ['.rough','#chunky']
});

6调整滑动到哪个位置就停止

$('.backtotop').smoothScroll({
offset: -100
});

7设定一个滑动开始之前的回调函数

$('a').smoothScroll({
beforeScroll: function() {
alert('ready to go!');
}
});

8设定一个滑动结束的回调函数

 $('a').smoothScroll({
afterScroll: function() {
alert('we made it!');
}
});

你也可以自己配置参数

 $.smoothScroll({
//滑动到的位置的偏移量
offset: 0,
//滑动的方向,可取 'top' 或 'left'
direction: 'top',
// 只有当你想重写默认行为的时候才会用到
scrollTarget: null,
// 滑动开始前的回调函数。`this` 代表正在被滚动的元素
beforeScroll: function() {},
//滑动完成后的回调函数。 `this` 代表触发滑动的元素
afterScroll: function() {},
//缓动效果
easing: 'swing',
//滑动的速度
speed: 400,
// "自动" 加速的系数
autoCoefficent: 2
});

什么?没看懂??没关系!!下边还有一波无脑操作!

只需要把文件导入后,将下边的代码copy进去就可以了,便可轻松实现页面中的平滑滚动

<script>
$(document)
.on('click', 'a[href*="#"]', function() {
if ( this.hash ) {
$.bbq.pushState( '#/' + this.hash.slice(1) );
return false;
}
})
.ready(function() {
$(window).bind('hashchange', function(event) {
var tgt = location.hash.replace(/^#\/?/,'');
if ( document.getElementById(tgt) ) {
$.smoothScroll({scrollTarget: '#' + tgt});
}
}); $(window).trigger('hashchange');
});
</script>

下面就是点击technolog滑动到 id为a1的div区,简单吧!

<a href="#a1">Technology</a>
<div id="a1">
</div>

smooth-scroll.js的下载地址?网上好多好多,找不到正确的?留言邮箱啊,博主服务一条龙。。。

页面中的平滑滚动——smooth-scroll.js的使用的更多相关文章

  1. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  2. 页面中php传值后循环列表js获取点击的id

    页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...

  3. js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. 在WPF中实现平滑滚动

    WPF实现滚动条还是比较方便的,只要在控件外围加上ScrollViewer即可,但美中不足的是:滚动的时候没有动画效果.在滚动的时候添加过渡动画能给我们的软件增色不少,例如Office 2013的滚动 ...

  5. 如何在pyqt中实现平滑滚动的QScrollArea

    平滑滚动的视觉效果 Qt 自带的 QScrollArea 滚动时只能在两个像素节点之间跳变,看起来很突兀.刚开始试着用 QPropertyAnimation 来实现平滑滚动,但是效果不太理想.所以直接 ...

  6. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  7. html页面中引入自签名证书的js web资源出现net::ERR_CERT_AUTHORITY_INVALID

    其实是浏览器客户端对自签名的内容认为不安全引起的,临时方法可以再浏览器中先直接访问下那个自签名的https地址,然后再访问有引用的那个页面就可以了. 以下内容引用自https://www.morong ...

  8. 前端:微信支付和支付宝支付在pc端和h5页面中的应用

    1:h5微信支付 使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html  中的 (1):公司需要首先要配置公众号微信支付地址和测试白名单(支付的时 ...

  9. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

随机推荐

  1. C#变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  2. .exe简单的更新软件demo

    百度网盘源码加文件:http://pan.baidu.com/s/1qYe2Vgg 功能:通过网站更新用户的软件,需要联网,也可以通过本地网站更新局域网用户软件. 根本实现:1.一个网站(本地就可以) ...

  3. USACO Section 1.1-3 Friday the Thirteenth

    Friday the Thirteenth 黑色星期五 13号又是一个星期五.13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数. 给出N年的一个 ...

  4. 【PAT_Basic日记】1005. 继续(3n+1)猜想

    #include <stdio.h> #include <stdlib.h> /** 逻辑上的清晰和代码上的清晰要合二为一 (1)首先在逻辑上一定要清晰每一步需要干什么, (2 ...

  5. Composer 安装(一)

    一.简介 Composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. ...

  6. 全球移动互联网大会gmic 2017为什么值得参加?

    长城会CEO郝义认为,"科学产业化将会推动科学复兴,"而本次GMIC 北京 2017也将首次引入了高规格科学家闭门峰会,专门设置G-Summit全球科学创新峰会,以"科学 ...

  7. java.util.NoSuchElementException: None.get的解决方法

    在Java中用null表示无值返回.在Java 里,null 是一个关键字,不是一个对象,所以对它调用任何方法都是非法的 笔者就常在类型转换时见到空指针错误,便是由null的特殊性导致的 而在scal ...

  8. poj1847 Tram 最短路Dijkstra

    题目链接:http://poj.org/problem?id=1847 Dijkstra算法的模版应用 题意:给你N个点和起点终点,点与点有铁路,接下来的N行分别为点i的情况 第一个数字表示与该点连通 ...

  9. redis中的事务

    首先明白在java中线程和进程的区别: 1.什么是多线程? 是指一个应用程序同时执行多个任务,一般来说一个任务就是一个线程 ,而一个应用程序有一个以上的线程我们称之为多线程. 2.什么是进程? 进程是 ...

  10. 转:Maven项目编译后classes文件中没有dao的xml文件以及没有resources中的配置文件的问题解决

    问题1:在做spring+mybatis时,自动扫描都配置正确了,却在运行时出现了如下错误.后来查看target/classes/.../dao/文件夹下,发现只有mapper的class文件,而没有 ...