一个回到顶部的锚点

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的定位达到目的。

以上是关于一个回到顶部的锚点的主要内容,如果未能解决你的问题,请参考以下文章

js使用锚点回到顶部

js回到顶部------转载

5种回到顶部的写法

前端点击回到当前页顶部

5种回到顶部的写法从实现到增强

5种回到顶部的写法从实现到增强