css 锚点链接

最新推荐文章于 2024-06-18 14:30:05 发布

timebeign

最新推荐文章于 2024-06-18 14:30:05 发布

阅读量1.8k

点赞数

分类专栏：笔记文章标签： css 前端锚点

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

@charset "utf-8";

/* CSS Document Download by http://www.codefans.net*/

.gray {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray;

}

/* reset */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

fieldset, img {

border:0;

}

ul,li {

list-style:none;

}

body {

background: #f1f1f1;

color: #666;

font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"\5B8B\4F53";

}

.row:after {

clear:both;

content:'\0020';

display:block;

height:0;

}

.row {

zoom:1;

}

/*链接颜色*/

a,button{outline:none; /*移除虚线框 IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}

color:#999;

text-decoration:none;

}

a:hover{

color:#be0000;

text-decoration: underline;

}

.fst{

font-family: "\5B8B\4F53";

}

h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; font-size: 16px;}

/* end reset */

.row{

width:1000px;

margin:0 auto;

}

/*模板头部，所有专题页面公用*/

.index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}

.index_nav li{width: 115px; height: 70px; float: left;}

.index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(../images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}

.index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}

.index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}

.index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}

.h15{height: 15px; overflow: hidden;}

.mainpage{width: 1000px; height:1000px;}

h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}

.mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}

.mainpage1{background: #fe6400;}

.mainpage2{background: #be0000;}

.mainpage3{background: #ccc;}

.mainpage4{background: #0093dd;}

.mainpage5{background: #a8cf33;}

*html{background-image:url(about:blank);background-attachment:fixed;}/*低版本浏览器防止抖动的，必须有*/

#tbox{width:30px; height:200px; float:right; position:fixed; display: none;

_position:absolute;

_bottom:auto;

_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

_margin-bottom:50px;

}/*这个只能改宽高其他的不要修改，需要滚动的内容都要放在这个div里面*/

.taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}

.taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}

#gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(../images/top_icon.gif) no-repeat; position:absolute; display:none; cursor:pointer} /*这个样式随便改，必须有position:absolute; */

#gotop:hover{background-position: 0 -30px;}

</style>

<body>

</ul>

</div>

<h2 id="index_1">这是第一个活动页</h2>

</div>

<h2 id="index_2">这是第二个活动页</h2>

</div>

<h2 id="index_3">这是第三个活动页</h2>

</div>

<h2 id="index_4">这是第四个活动页</h2>

</div>

<h2 id="index_5">这是第五个活动页</h2>

</div>

</div>

</body>

</html>

jQuery(document).ready(function($) {

$(".index_nav li a").click(function(event) {

var index=this.title

var id='#'+'index_'+index

$("html,body").animate({scrollTop: $(id).offset().top}, 1000);

});

$(".taoba").click(function(event) {

var index=this.title

var id='#'+'index_'+index

$("html,body").animate({scrollTop: $(id).offset().top}, 1000);

});

function a(x,y){

l = $('#main').offset().left;

w = $('#main').width();

$('#tbox').css('left',(l + w + x) + 'px');

$('#tbox').css('bottom',y + 'px');

}//获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度

$(function() {

$(window).scroll(function(){

t = $(document).scrollTop();

if(t>500){

$('#tbox').show();

}else{

$('#tbox').hide();

}

if(t > 50){

$('#gotop').fadeIn('slow');

}else{

$('#gotop').fadeOut('slow');

}

})

a(10,100);//#tbox的div距浏览器底部和页面内容区域右侧的距离

$('#gotop').click(function(){

$('body,html').animate({

scrollTop: 0

800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快

return false;

})

});

</script>

timebeign

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 锚点链接

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录

css 锚点 链接

css 锚点链接