html锚点总结

html

一.思路1

内容区域一定要给滚动台,然后给滚动条设置宽高为0px,隐藏滚动条,内容的div要给到高度大于屏幕的高度,就可以实现翻页的效果

一.思路2

如果根据html的滚动条来实现,如果想到达自己制定的位置,可以给相应的padding和margin值,或者是各个块内放一个空的div,设置需要的宽高即可;

一.思路3

内容区域可以有两个div,可以让外面一层的div为隐藏并设置滚动条根据此来滚动,里面的div为显示,并且里里面的div的宽高大于外面的就可以遮住了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{overflow: hidden;height: 100%;}
*{padding: 0;margin: 0;}ul,li{list-style: none;}a{text-decoration: none;}
.content{min-height: 500px;}
#content1{background: red;}
#content2{background: yellow;}
#content3{background: green;}
#content4{background: pink;}
#content5{background: blue;}
.box{width: 800px;height: 600px;border: 1px solid #bbb;margin-left: 50px;overflow-y: scroll;}
.box::-webkit-scrollbar{width:0px;height: 0px;}
#top{margin-top: 50px;margin-left: 50px;}
#top ul li{float:left;width: 120px;}
</style>
</head>
<body>
<div id="top">
  <ul>
    <li><a href="#content1">content1</a></li>
    <li><a href="#content2">content2</a></li>
    <li><a href="#content3">content3</a></li>
    <li><a href="#content4">content4</a></li>
    <li><a href="#content5">content5</a></li>
  </ul>
</div>
<div class="box">
  <div id="content">
    <div id="content1" class="content">
      content1content1content1content1content1content1<br />
      content1content1content1content1content1content1<br />
      content1content1content1content1content1content1<br />
      content1content1content1content1content1content1<br />
    </div>
    <div id="content2" class="content" style="padding-top: 50px;">
      content2<br />
      content2content2content2content2content2content2<br />
      content2content2content2content2<br />
    </div>
    <div id="content3" class="content">
      content3content3content3content3content3content3<br />
      content3content3content3content3content3content3<br />
      content3content3content3content3content3content3<br />
    </div>
    <div id="content4" class="content">
      content4content4content4content4content4content4<br />
      content4content4content4content4content4content4<br />
      content4content4content4content4content4content4<br />
      content4content4content4content4content4content4<br />
    </div>
    <div id="content5" class="content">
      content5content5content5content5content5content5<br />
      content5content5content5content5content5content5<br />
      content5content5content5content5content5content5<br />
    </div>
  </div>
</div>
</body>
</html>

时间: 06-19

html锚点总结的相关文章

【锚点】

第一种跳转:(同一页面中跳转,使用name定位) 使用name属性只能针对a标签来定位,而对div等其它标签就不能起到定位作用 <a href="#q1">问题一?</a> <a href="#q2">问题二?</a> <a href="#q3">问题三?</a> <a name="q1">问题一的解答</a> <a name

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

react-router解决锚点跳转问题

添加一个onClick方法.onClick方法传入一个锚点的id,然后用下面的函数来找到锚点并跳转到锚点. scrollToAnchor = (anchorName) => { if (anchorName) { // 找到锚点 let anchorElement = document.getElementById(anchorName); // 如果对应id的锚点存在,就跳转到锚点 if(anchorElement) { anchorElement.scrollIntoView(); } }

angular 4 路由风格 #锚点风格

当angular 编译完成后.部署到服务器,点击标签跳转路由.此时刷新页面.页面跳转403,我改回了锚点路径可以跳转页面后,刷新浏览器依旧显示正确页面.应该有其他方式让浏览器刷新后依旧正常工作的h5路由器. 改成锚点路径的代码如下 import {LocationStrategy, HashLocationStrategy} from '@angular/common'; { provide: LocationStrategy, useClass: HashLocationStrategy },

BeautifulSoup抓取列表页锚文本

素闻BeautifulSoup提取效率低,艾玛,第一印象果然是很要命的,反正比Re 和 Lxml 是要慢的,不过就无奈Re的正则折腾来折腾去,没写出来,Lxml 的 Xpath 又用得不好. 不过就这三个模版来看,BeautifulSoup的表现还是不错的,够简单,顺便测试了一下时间,抓10个列表页花不了1分钟,当然我是菜鸟,没事不会纠结终结速度. 核心就是这部分,用 Find_all 和 Find 都搞了半天不成功,最后用CSS提取搞定,也怪我太着急. 用Find比较麻烦,一层层的Class找

HTML——表单与锚点

练习做一个邮箱的注册页面 1.12行2列的表格 2.表格里面嵌入表单 3.最后建一个锚点 4.写具体内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

第五讲:OpenGL坐标系和UIKit坐标系、锚点、addChild函数详解

一.坐标系 OpenGl坐标系 原点在左下角(0,0),与数据的二维坐标系一致 UIKit坐标系 又称为屏幕坐标系,原点在左上角,X轴越右越大,Y轴越下越大: 由OpenGL转化为UIKit的方法: CCPoint point = CCDirector::sharedDirector()->convertToUI(sp1->getPosition); 二.锚点 锚点默认为(0.5,0.5) 就是在精灵的中间 : *****坐标系已锚点定位(先确定锚点在哪,ccp(X,Y)是描述锚点在哪个位置)

markdown中的锚点处理

markdown markdown是一个相对简单的DSL,定义了简单的标签来描述html文档格式. 比如: #一级标题 来生成html <h1>一级标题<h1> ##二级标题 来生成html <h2>二级标题<h2> [链接文字][link id] 与 [link id]:www.baidu.com 的组合来描述一个链接: [链接文字][url name] [url name]: http://www.baidu.com markdown的局限 使用了一段时

什么是锚点(AnchorPoint)

1.锚点通常是图形的几何中心, AnchorPoint(x,y)的两个参量x和y的取值通常都是0到1之间的实数,表示锚点相对于节点长宽的位置. 例如,把节点左下角作为锚点,值为(0,0): 把节点的中心作为锚点,值为(0.5,0.5): 把节点右下角作为锚点,值为(1,0). 精灵的AnchorPoint默认值为(0.5,0.5),其他节点的默认值为(0,0),如CCLayer. 相关的操作:setAnchorpoint(0,0); 影响: 1.挂载位置,   2.缩放,     3.旋转 my

ios中关于对锚点的理解

锚点在ios中见到的地方不多,大部分用在动画中. 今天看到一个动画,上面都是关于锚点的,锚点这个概念在两年前看cocos2d得基本概念时接触过,当时没怎么看,今天看到了,就在好好的学一下. 看了一篇blog,是关于锚点的,就借鉴一些上面的图像: cocos2d里采用OpenGL ES坐标系,坐标原点在屏幕左下角.而ios采用的是Quartz 2D坐标系,坐标原点在屏幕左上角. 在cocos2d和ios中分别把视图的坐标点设为(10,10),结果如下: 那么什么是锚点呢?下面以一个例子来说明: 比