锚点跳转的过渡效果

简介:

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:实现锚点连接/锚点跳转
603 0
|
3月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
49 1
|
3月前
|
JavaScript 容器
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
560 0
|
5月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
45 0
|
5月前
|
JavaScript
vue中轻松搞掂鼠标气泡框提示框tip跟随
vue中轻松搞掂鼠标气泡框提示框tip跟随
|
5月前
|
JavaScript 前端开发 容器
随着页面的滚动导航条跟着滚动
随着页面的滚动导航条跟着滚动
|
5月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
10月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
63 0
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
369 0
|
JavaScript
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部
原生js判断某个区域的滚动条滚动到了底部