回到顶部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif;
            font-size: 14px;
            -webkit-user-select:none ;
        }
        html,body{
            width: 100%;
            height: 500%;
            background: #11c900;
            background: -webkit-linear-gradient(top,#11c900,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lawngreen,lightpink,lightsalmon,lightseagreen);
        }
        a{
            text-decoration: none;
            color: #000;
        }
        a:hover,a:active,a:target,a:visited{
            text-decoration: none;
            color: #000;
        }
        #goLink{
            position:fixed;
            bottom: 150px;
            right: 50px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: red;
            opacity: 0.2;
            filter: alpha(opacity=20);

            border-radius: 50%;
        }
        #goLink:hover{
            opacity: 1;
            filter: alpha(opacity=100);
        }
        #target{
            margin: 1000px;

        }
    </style>
</head>
<body>
<!--
      A标签本身是跳转页面的,把跳转的地址写在href这个属性中
      1)不写值的话是刷新本页面
      2)写的如果是#target,是锚点定位,定位到当前页面ID为target这个位置
      3)""javascript:;这样写是取消A标签的默认跳转的行为
-->
   <!--<a href="#target" id="goLink">GO</a>
   <div id="target"></div>-->
    <a href="javascript:;" id="goLink">GO</a>
     <script type="text/javascript">
         var goLink = document.getElementById("goLink");
         goLink.onclick = function(){
             document.documentElement.scrollTop = 0;
             document.body.scrollTop = 0;
         }
     </script>
</body>
</html>
时间: 2024-10-05 13:51:32

回到顶部的相关文章

JQuery实现回到顶部

当一个页面的内容比较长时,一般都在页面的右下角的固定位置有个"回到顶部"的按钮,点击后,页面的滚动条逐渐回滚到顶部,本篇来描述一个它的实现过程. 首先,需要有一个按钮 <button id="btn_top" title="回到顶部"> 回到顶部 </button> 然后给这个元素定位到右下角,我们使用position:fixed.下面这个按钮加一些最基本的样式 #btn_top { position: fixed; bo

Angular回到顶部按钮指令

之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> <back-button></back-button> 指令的单词在html中使用横杠分隔,而在js代码中使用驼峰法,没毛病,简单不解释: /* 回弹按钮指令 * */ app.directive('backButton', function() { return { restrict: 'E

html css jquery 回到顶部按钮

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index: 9999; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2

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

http://www.cnblogs.com/xiaohuochai/p/5836179.html 前面的话 本文先详细介绍回到顶部的5种写法,然后对其实现功能增加,最后得到最终实现 写法 [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 <body style="height:2000px;">

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

关于“回到顶部”的一些笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部</title> <style>.bg{ width: 1190px; margin: 0 auto;}#btn{ width: 40px; height: 40px; position: fixed; right: 65px; bottom

octopress添加回到顶部按钮

准备回到顶部的png图片一枚,可以随自己喜好google.分享我的 取名top.png,保存在octopress/source/images/top.png octopress/source/_includes/custom/目录下新建网页文件:totop.html <!--返回顶部开始--> <div id="full" style="width:0px; height:0px; position:fixed; right:80px; bottom:80p

回到顶部 jquery

//回到顶部 $(function() { $.fn.backToTop = function(options) { var defaults = { showHeight : 120, speed : 100 }; var options = $.extend(defaults, options); $("#footer").append("<div id='totop' style='cursor:pointer;position:fixed;bottom:20px

回到顶部的写法

[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" style="position:fixed;rig

原生js实现使滚动条缓慢回到顶部的效果

html 部分 (因为a标签有链接功能,此时最好不要用a包裹 否则影响实现效果) <li id="btn-top">回到顶部</li> js部分 var top=document.getElementById("btn-top"); var bottom=document.getElementById("btn-top"); top.onclick=function(){ //alert(11); timer=setInt