a超链接之返回顶部的两种实现方法

1.通过css实现:

为页面顶部如body或者自己设置的盒子等加上唯一id属性

<body id="id">
....
<a href="#id">返回顶部</a>

2.js实现

通过设置标签滚动位置判断

document.body.scrollTop=0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cs_top{
            position: fixed;
            right: 10px;
            bottom: 10px;
            height: 60px;
            width: 60px;
            background-color: darkgray;
            opacity: 0.5;
        }
        .js_top{
            position: fixed;
            right: 10px;
            bottom: 120px;
            height: 60px;
            width: 60px;
            background-color: rebeccapurple;
            opacity: 0.5;
        }
        .hide{
            display: none;
        }
        #content{
            height:960px;
            width: 100%;
        }
        #content:before{
            content: ‘top‘;
            display: block;
        }
        body:after{
            content: ‘end‘;
            display: block;
        }
    </style>
    <script>

    </script>
</head>
<body onscroll="Func();">
    <div id="content">
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
        <p>fdffa</p>
    </div>
    <div class="cs_top">
        <a href="#content">返回顶部</a>
    </div>
    <div class="js_top hide">
        <a href="javascript:void(0);" onclick="GoTop();">返回顶部</a>
    </div>
</body>
</html>
<script src="../02js拾遗/jquery.js"></script>
<script>
    function Func(){
        var scrollTop=document.body.scrollTop;
        var ele=document.getElementsByClassName(‘js_top‘)[0];
        if (scrollTop>50){
            ele.classList.remove(‘hide‘);
        }else{
            ele.classList.add(‘hide‘);
        }
    }

    function GoTop(){
        document.body.scrollTop=0;
    }

</script>

原文地址:https://www.cnblogs.com/ssyfj/p/8503709.html

时间: 2024-10-10 10:26:18

a超链接之返回顶部的两种实现方法的相关文章

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

网页返回顶部的几种方法

1,在页面顶部固定一个  返回网页顶部的 按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #2C2C2C; text-decoration: none; border: 1px solid #CCCCCC; } <a class="back-to-top" h

Mock服务端:客户端Get请求,返回json数据两种方式

Mock服务端:客户端Get请求,返回json数据两种方式:1,直接在response中返回json数据 2,通过json文件返回: 准备工作: wiremock-body-transformer-1.1.6.jar wiremock-standalone-2.14.0.jar 安装java运行环境(jdk等) 一,直接在response中返回: 说明: mappings : 对应请求request位置 __files : 对应响应reponse位置 mappings中增减文件:get.json

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X

partition函数两种实现方法

patition函数根据某种比较关系将数组分成两部分,下面根据元素比某个数字大或小,以此为基准划分,给出两种实现方式 1)若数组为a[0]~a[n-1],函数调用如下 partition(a,-1,n-1)a[n-1]一般作为基准元素所在的位置,返回基准元素应该放置的下标 int partition(int *a, int i, int j, int pivot){ do{ while (a[++i] < pivot); while ((j > 0) && (a[--j] &g

黑马程序员【两种Ajax方法】

两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技术已经被人们广泛应用,而对于一些对Web的了解还不是很深入的初学者,Ajax依然带着一层神秘的难懂的色彩,今天就在这里给大家以简单的方式解读一下Ajax的实现步骤和原理,并且给大家两种实现Ajax的方法,js和jquery. 首先ajax其实就是js+xml的技术,前端的表现就是一段js代码.要使用

angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

今天我们要讲的是ng2的路由系统. 例子 例子是官网的例子,包含一个“危机中心”和“英雄列表”,都在一个app中,通过路由来控制切换视图.还包含了promise的用法,服务的用法等多个知识点. 源代码: https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router 运行方法: 在根目录下运行: http-server 引入库文件设置base href 路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,

跳转的两种实现方法setInterval和setTimeout

setInterval方法: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="

虚方法与两种重写方法的比较

虚方法virtual..override: 1.派生类的方法和基类的方法有相同的签名和返回类型. 2.基类的方法使用virtual标注. 3.派生类的方法使用override标注. class MyBaseClass { virtual pubilc void Print() ... } class MyDerivedClass : MyBaseClass { override pubilc void Print() ... } 注意: 1.重写和被重写的方法必须有相同的可访问性.换一种说法,被