单个网页内锚链接的跳转
经常遇到要在一个页面内跳转的需求。
估计用的最多的方法就是
<a href="#myId">跳转</a> <div id="myId">目标</div>
这种跳转很方便,但是在四处都讲用户体验的今天,还是有些可以改进的地方。
如何改进呢。就用到jquery。让其有个移动的效果,从“跳转” 缓缓的滚动到“目标”。
如何实现呢。
技术点:animate,和scrollTop,和offset().top
animate:负责动画效果。
scrollTop():滚动条到顶部的距离。
offset().top : 目标div “#myID”到页面顶部的偏移量。
一个粗糙的示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> < title >单页内滚动</ title > < meta name="description" content=""> < meta name="keywords" content=""> < link href="" rel="stylesheet"> < script type="text/javascript" src="../js/jquery.js"></ script > < script type="text/javascript"> $(function(){ $("a").click(function(){ //$("body").animate({scrollTop: '300px'}, 1000); //让body滚动条移动300px。 var myh=$("#mubiao").offset().top; console.log(myh); $("body").animate({scrollTop:myh+'px'},1000); }) }) </ script > </ head > < body > < a href="#mu1biao">跳转到目标</ a > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p id="mubiao">#mubaio</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > < p >1</ p > < p >13</ p > < p >14</ p > < p >12</ p > < p >14</ p > < p >16</ p > < p >178</ p > < p >18</ p > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步