一个回到顶部的锚点
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个回到顶部的锚点相关的知识,希望对你有一定的参考价值。
一般网站的右下角都会有一个回到顶部的锚点,但是在没有学bootstrap的时候,我还是会想着用定位来做这个东西,但是现在用bootstrap来做的,所以将它记录下来。
<!DOCTYPE html> <html> <head> <title>附加导航插件</title> <meta charset = ‘utf-8‘> <link rel = ‘stylesheet‘ href = ‘http://files.cnblogs.com/files/reverse-2016-12-27/bootstrap.min.css‘> <meta name = ‘viewport‘ content = ‘width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no‘> <style> #top{ bottom:50px; right:50px; text-align:center; line-height:50px; width:50px; height:50px; background-color:skyblue; border-radius:50%; } .nav-pills.affix{ top:50px; } .nav-pills{ width:150px; } </style> </head> <body data-spy = ‘scroll‘ data-target = ‘#myScroll‘ id = ‘myTop‘> <div class = ‘container‘> <div class = ‘jumbotron‘ style = ‘height:150px‘> <h2 >Bootstrap Affix</h2> </div> <div class = ‘row‘> <div class = ‘col-xs-3‘ id = ‘myScroll‘> <ul class = ‘nav nav-pills nav-stacked‘ data-spy = ‘affix‘ data-offset-top = ‘150‘ > <li class = ‘active‘><a href = ‘#section-1‘>第一部分</a></li> <li><a href = ‘#section-2‘>第二部分</a></li> <li><a href = ‘#section-3‘>第三部分</a></li> <li><a href = ‘#section-4‘>第四部分</a></li> <li><a href = ‘#section-5‘>第五部分</a></li> </ul> </div> <div class = ‘col-xs-9‘> <h2 id = ‘section-1‘>第一部分</h2> <p style = ‘line-height:2‘>1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……</p> <h2 id = ‘section-2‘>第二部分</h2> <p style = ‘line-height:2‘>1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……</p> <h2 id = ‘section-3‘>第三部</h2> <p style = ‘line-height:2‘>1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……</p> <h2 id = ‘section-4‘>第四部分</h2> <p style = ‘line-height:2‘>1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……</p> <h2 id = ‘section-5‘>第五部分</h2> <p style = ‘line-height:2‘>1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……1月3日消息 ,2017首场流星雨今晚22点 你知道今天错过了还意味着什么吗?是还有很多场。元旦之后的今天,告别一下小雪与雾霾,新年工作的第一天,我们晚上该用什么方式来迎接新年呢?是大吃一顿还是大睡一觉,或者是那个什么什么!今晚22点特大流星雨 ,一场盛大的流星雨即将来临……</p> </div> </div> </div> <div class = ‘circle‘ id = ‘top‘ data-spy = ‘affix‘><a href = ‘#myTop‘>top</a></div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
这个方法主要是对div 设置了一个data-spy =‘affix‘来进行实现的。这样就相当于对这个div ,进行了对这个div的定位达到目的。
以上是关于一个回到顶部的锚点的主要内容,如果未能解决你的问题,请参考以下文章