900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html中的坐标从哪里开始 HTML+CSS入门 页面内跳转到相应位置的3种方法

html中的坐标从哪里开始 HTML+CSS入门 页面内跳转到相应位置的3种方法

时间:2019-10-02 18:46:48

相关推荐

html中的坐标从哪里开始 HTML+CSS入门 页面内跳转到相应位置的3种方法

本篇教程介绍了HTML+CSS入门 页面内跳转到相应位置的3种方法,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

首先设置所需的css和html

设置css

.demo{

width:200px;

height:200px;

border:1pxredsolid;

margin-bottom:100px;

margin-right:50px;

}

.btn{

position:fixed;

right:0;

top:20px;

background-color:#0000cc;

color:#ffffff;

}

设置html

这个DIV,id是demo

重点来了

1.第一种方法直接在html中添加

跳到id为demo的DIV

使用a标签跳转到相应id的位置

2.第二种方法先在html中添加

再添加js代码

functiononTopClick(){

window.location.hash="#domo";

}

由于btn没有herf跳转功能,这里我们用hash(锚链接)跳到当前页面的位置

3.第三种方法先在html中添加

到指定滚动高度

再添加js代码

$(document).on('click',$('.btn'),function(){

$(window).scrollTop($('#demo').offset().top)

})

这里我是通过先得到id为demo的div距离文档顶部的距离,再使页面滚动到这个高度来达到目的。

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。