锚点跳转的过渡效果

简介:

CSS实现:http://stackoverflow.com/questions/17631417/css-pure-css-scroll-animation

jq实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( function  () {
     $( 'a[href*=#],area[href*=#]' ).click( function  () {
         console.log( this .pathname)
         if  (location.pathname.replace(/^\ //, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
             var  $target = $( this .hash);
             $target = $target.length && $target || $( '[name='  this .hash.slice(1) +  ']' );
             if  ($target.length) {
                 var  targetOffset = $target.offset().top;
                 $( 'html,body' ).animate({
                     scrollTop: targetOffset
                 },
                         1000);
                 return  false ;
             }
         }
     });
});

  


本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/5314749.html,如需转载请自行联系原作者

相关文章
|
小程序
小程序-uniapp:实现锚点连接/锚点跳转
小程序-uniapp:实现锚点连接/锚点跳转
814 0
|
8月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
65 0
|
8月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
1138 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
424 0
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
|
JavaScript
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
607 0
在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
|
Web App开发
iframe去掉竖向滚动条仍可以滚动
iframe去掉竖向滚动条仍可以滚动
1079 1