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

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

<

首先设置所需的css和html

设置css

.demo{

width: 200px;

height: 200px;

border: 1px red solid;

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代码

function onTopClick() {

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知识！