html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。
第二种方法是在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦。
第三种方法是用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>
注意:运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。
$("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。
另外,脚本可以进一步优化,自己来试试
这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。
缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。
第四种方法是用js的srollIntoView方法,直接用:
document.getElementById("divId").scrollIntoView();
这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。
推介大家用第四种,我依次试了前三种,都有各种问题。
html 页面内锚点定位及跳转方法总结的更多相关文章
- html页面内锚点定位及跳转方法总结
1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- linux服务器用nginx做网站内页之间301的跳转方法
例: 要将这个页面 /topic/show-228-1.html 做301跳转到 /dance/topic-show-228-1.html nginx的伪静态规则就这样写: rewrite ^/top ...
- vue中,实现锚点定位及跳转(url不发生变化)
<div class="footer" @click="returnTop"> methods:{ returnTop:function(){ do ...
- Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
- 如何保证WebBrowser一直在页面内跳转
目前在编写一个小工具,用到了WebBrowser,在调试时点击页面内连接自动打开ie跳转,所以百度查找解决办法. private void webBrowser1_NewWindow(object s ...
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
随机推荐
- RequireJS基础(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...
- Ubuntu 命令大全
一.文件目录类 1.建立目录:mkdir 目录名 2.删除空目录:rmdir 目录名 3.无条件删除子目录: rm -rf 目录名 4.改变当前目录:cd 目录名 (进入用户home目录:cd ~:进 ...
- Apache Server 添加虚拟主机(Virtual Host )
当前许多虚拟服务器如阿里云的ECS服务器,都提供各式各样的虚拟机,常见的有Linux.Windows等,如果我们使用了Apache Server作为虚拟机的Web服务器,并且我们希望多个web应用程序 ...
- vim中 set 用法设置
vi set用法from google search一.常用收集如下:(vi set)set autoindent 在插入模式下,对每行按与上行同样的标准进行缩进,与shiftwidth选项结 ...
- 转 Microsoft's Objective-C tech started on BlackBerryOS, Tizen
今天看到了这个 Microsoft's Objective-C tech started on BlackBerryOS, Tizen 见原文 http://www.osnews.com/story ...
- CU上看到的一个简单的算法帖子
今天也是明白了,编程与数学的关系.例子很简单,不过能说明问题. 如果我们优化算法只从计算机特性来考虑,那么我们的人脑也成了计算机.不要忘记数学对于算法的重要影响. 题目: 返回小于数字 N 的所有 3 ...
- 初学c# -- 学习笔记(五) winfrom自定义滚动条
找了些例子,要么庞大.要么搞个安装组件什么的,我要求能用就行了.实在找例子修改麻烦,就做了一个.其实实现挺简单,就是panel或图片什么的跟着鼠标走就行了. 这里panel自己可以加背景图或直接搞个图 ...
- hdu5452 Minimum Cut
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5452 题意:给你一个图和它的生成树,要你在树上删一条边,问你最少删多少条边使得图不联通(开始时图一定联 ...
- 在Win10系统中关闭Hyper-V
1.将鼠标移至开始图标,单击右键(注意:是右键,不是左键!!!): 2.点击“控制面板”: 3.点击“程序”: 4.点击“启用或关闭windows功能”: 5.去掉“Hyper-V”的勾选,确定:
- 使用HttpClient 发送get、post请求,及其解析xml返回数据
一.关于HttpClient的使用: 可以参考这个博客地址,这里有详细的介绍,需要的可以先看一下: 地址是:http://blog.csdn.net/wangpeng047/article/detai ...