精华内容
下载资源
问答
  • 网页返回顶部

    千次阅读 2011-11-11 15:47:31
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 返回顶部按钮   #gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 50));}
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>返回顶部按钮</title>
      <!--[if lt IE 7]>
    <style type="text/css">
    #gotopbtn{position:absolute;top:expression(eval(document.documentElement.scrollTop + 50));}
    </style>
    <![endif]-->
    <style type="text/css">
    body{
     font:12px Verdana, Geneva, sans-serif;
     line-height:1.2;
     text-align:center;
     margin:0px;
    }
    #gotopbtn {
     width:0px;
     height:0px;
     background:#fff;
     position:fixed;
     bottom:70px;
     right:20px;
     display:none;
     cursor:pointer;
     font-size:14px;
     line-height:30px;
     border:1px solid #aaa;
    }
    .main{
     width:100%;
     background:#ccc;
    height:800px;
     margin:0 auto;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <img src="/jscss/demoimg/site.gif" ><br>
    </div>
    <div id="gotopbtn"><img src='top.gif'></img></div>
    <script type="text/javascript">
    backTop=function (btnId){
     var btn=document.getElementById(btnId);
     var d=document.documentElement;
     window.οnscrοll=set;
     btn.οnclick=function (){
      btn.style.display="none";
      window.οnscrοll=null;
      this.timer=setInterval(function(){
       d.scrollTop-=Math.ceil(d.scrollTop*0.1);
       if(d.scrollTop==0) clearInterval(btn.timer,window.οnscrοll=set);
      },10);
     };
     function set(){btn.style.display=d.scrollTop?'block':"none"}
    };
    backTop('gotopbtn');
    </script>
    </body>
    </html>
    展开全文
  • CSS实现网页返回顶部按钮

    千次阅读 2020-08-11 19:36:31
    CSS实现网页返回顶部按钮 1、问题需求 实现网页中常见的返回顶部按钮。当网页向下浏览到一定距离之后才会出现返回顶部按钮,当回到网页初始状态之后,返回顶部按钮又会隐藏。 2、原理 使用浮动float属性和定位属性...

    初学CSS:实现网页返回顶部按钮

    1、问题需求

    实现网页中常见的返回顶部按钮。当网页向下浏览到一定距离之后才会出现返回顶部按钮,当回到网页初始状态之后,返回顶部按钮又会隐藏。

    2、操作原理

    使用浮动float属性和定位属性position:sticky

    3、解决方案

    返回按钮使用div实现。将返回顶部div放置在需要的位置,使用position属性的sticky,实现当网页浏览到一定距离时,才会出现返回按钮。再使用float属性将div定位到右侧。

    <!-- HTML -->
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <!-- 返回顶部按钮,这里需要放置在自己指定的位置,以此实现网页浏览到这里时,出现返回顶部按钮 -->
    <div class="back-top">
        <a href="#top">返回顶部</a>
    </div>
    
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
    
    .back-top{
    			/*float将div脱离文档流,这样就不会占据文档流中的位置,不会留有空白*/
                float: right;
                /*这里使用right将其浮动至右侧*/
                right: 100px;
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: #999999;
                position: sticky;
                /*注意:top属性实现定位,top和bottom等定位方式是不同的*/
                top: 500px;
                right: 100px;
            }
            .back-top>a{
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 20px;
                line-height: 100px;
            }
    

    但是这里使用的float是存在问题的,因为float还是会占据位置的,原因是因为外部的div存在高度与宽度,那么这里将外部的div的宽度和高度设置为0就可以实现假不占据文档位置。

     .back-top{
                position: sticky;
                top: 500px;
                height: 0px;
                float: right;
                right: 50px;
            }
            .back-top>a{
                display: block;
                width: 100px;
                height: 100px;
                text-align: center;
                text-decoration: none;
                font-size: 20px;
                line-height: 100px;
                border-radius: 50px;
                background: #999999;
            }
    

    4、实现结果

    在这里插入图片描述

    5、总结

    1. 将带有position:sticky属性的元素放在需要的位置,必须要设定好left、right、top、bottom其中的一个值,可以设置多个,但是不能同时设置相反的值;
    2. 使用float将元素设定在指定位置,但是不知道会不会对position产生影响,所以这里存疑;
    3. 父元素必须是overflow:visible,否则不会生效,如果是hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况;

    告读者知: 这是作者在实践中遇到的问题,但是其解决办法不会只有一种,而且作者方法可能存在很多问题,所以如果您若是使用的话请谨慎,遇到问题可以进行留言评论,大家可以相互交流。

    展开全文
  • 网页返回顶部的几种方法 1,在页面顶部固定一个 返回网页顶部的 按钮 .back-to-top { position: fixed; right: 20px; bottom: 10px; width: 100px; height: 30px; text-align: center; line-height: 30px; color: #...

    网页返回顶部的几种方法

    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;

    }

    返回顶部

    这样一点点击 按钮直接返回网页顶部

    2,使用jquery方法

    <script>
        var backBtn= $('.back-to-top');
        backBtn.on('click',function () {
              $('body,window').animate(
                  {
                      scrollTop:0
                  },300
              )
         
        })
        $(window).on('scroll',function () {
             if($(window).scrollTop()>$(window).height()){
                   backBtn.fadeIn();
             }else{
                   backBtn.fadeOut();
             }
        })
    </script>
    

    3 使用自定义链接锚记:
    在这里插入图片描述

    这种方法,就是使用的自定义链接锚记了,必须要定义锚记,然后使用超链接指向锚。

    这种方法其实跟第二种方法差不多,只不过必须要额外定义一个链接锚记。
    Html网页返回顶部功能的几种实现方法

    4 href指向特定id:
    在这里插入图片描述
    这种方法是在页面现有的标签中,使用“返回顶部”的连接的href指向顶部具有id属性的标签,以实现返回顶部的功能。这种方法,需要在页面顶部的标签中有具有id属性的标签,来实现指向顶部。亦可自定义添加。
    Html网页返回顶部功能的几种实现方法

    5 使用简单脚本:
    在这里插入图片描述

    这种方法也是最近知道的,可以设置scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。

    展开全文
  • CSS加JS实现网页返回顶部功能

    千次阅读 2019-04-21 19:50:38
    通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种,这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少,容易理解。 实现原理 1.我们需要再DOM中添加自己的DIV,里面...

    最近在设计自己的博客,前端页面在内容很多的时候往下拖动会有滚动条。通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种,这里我采用的最实用的一种。使用CSS+Jquery方式 代码量相对较少,容易理解。

     

    实现原理

    1.我们需要再DOM中添加自己的DIV,里面包含一个a标签,a标签里面包含两个img标签用于存放返回顶部的图片。

    2.添加必要的CSS样式

    3.然后通过JS代码实现当网页滚动100px以下,返回顶部的图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变的效果。

    4.当点击a标签时,JS实现延迟滚动网页到顶部。

     

    实现效果

     

    代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
    
        <style type="text/css">
            .right-bar {
                position: fixed;
                display: none;
                bottom: 100px;
                right: 0;
                text-align: center;
            }
    
            .right-bar a {
                text-align: center;
                text-decoration: none;
                color: #757575;
                display: block;
                width: 64px;
            }
    
            .right-bar .bar-img {
                position: relative;
                width: 30px;
                height: 30px;
                padding-top: 20px;
                margin: 0 0 0 17px;
            }
    
            .right-bar .bar-s .bar-img img {
                width: 20px;
                height: 20px;
            }
    
            .right-bar .bar-img .hover-img {
                display: none;
            }
    
            .right-bar a:hover .hover-img {
                display: block;
            }
    
            .right-bar a:hover .original-img {
                display: none;
            }
    
            .content {
                margin: 10px 100px;
                text-indent: 2em;
                text-align: justify;
                line-height: 1.6em;
            }
        </style>
    </head>
    
    <body>
        <p class="content">
            此处填充任意大量文本
        </p>
        <div class="right-bar" id="go-to-top">
            <a href="#top">
                <div class="bar-img">
                    <img class="original-img" src="image/totop.png">
                    <img class="hover-img" src="image/totop_hover.png">
                </div>
            </a>
        </div>
    </body>
    <script>
        $(function () {
            //当滚动到距顶部100像素以下时,出现箭头图标,否则消失
            $(function () {
                $(window).scroll(function () {
                    if ($(window).scrollTop() > 100) {
                        $("#go-to-top").fadeIn(1000);
                    }
                    else {
                        $("#go-to-top").fadeOut(1000);
                    }
                });
    
                //点击图标回到页面顶部
                $("#go-to-top").click(function () {
                    if ($('html').scrollTop()) {
                        $('html').animate({ scrollTop: 0 }, 1000);
                        return false;
                    }
                    $('body').animate({ scrollTop: 0 }, 1000);
                    return false;
                });
            });
        });
    </script>
    
    </html>

     

     

     

    展开全文
  • 纯js实现网页返回顶部功能(万能的兼容目前所有浏览器) 在web2.0时代,越来越多的网站ru
  • 但是唯一的缺点就是样式不怎么样,会显示这个锚标记。 <a name="top"id="top">...二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置,有两种很简单的实现方式: ..
  • 几种常用网页返回顶部代码

    千次阅读 2016-08-17 17:15:22
    ...但是唯一的缺点就是样式不怎么样,会显示这个锚标记。 放置位置在标签之后随便找个地方放都...二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置,有两种很简单的实现方式: 方式1(推荐
  • 点击按钮——网页返回顶部代码

    千次阅读 2013-01-03 15:56:23
    放置位置在标签之后随便找个地方放都...使用Javascript Scroll函数返回顶部 使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置,有两种很简单的实现方式: 方式1: 返回顶部 scroll第一个参
  • 网页悬浮返回顶部图标可以说是一项非常常见切比较实用的功能,可以使用HTML来实现,但是返回顶部效果太过僵硬,体验不好,这里分享一个纯js返回顶部切具有过渡效果的实例。 效果如上图所示。 具体代码如下: ...
  • 如何为网页添加返回顶部按钮

    千次阅读 2013-08-16 08:51:27
    如何为网页添加返回顶部按钮   方法一:傻瓜式方法 1.在body的标签添加定位id 2.在最底部需要返回顶部的位置添加触发定位的代码 返回顶部 这种方法非常死板,必须让用户移动到正确的位置才能返回顶部。 ...
  • 返回网页顶部

    2019-07-01 21:35:00
    1.当网页很长,点击某段文字或图片可返回网页顶部 ...返回顶部</a> <!-- 返回顶部的文字或图片--> 2.示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
  • 网页返回顶部代码及注释说明

    千次阅读 2013-04-23 16:06:57
    下面就说下简单的返回顶部效果的代码实现,附注释说明。 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 返回...
  • 返回网页顶部功能

    2021-01-30 23:08:19
    实现功能:在网页高度大于设定的值之后,出现返回顶部按钮,小于则自动隐藏,点击按钮返回网页顶部,同时按钮隐藏。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title...
  • 放置位置在标签之后随便找个地方放都...使用Javascript Scroll函数返回顶部 使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置,有两种很简单的实现方式: 方式1: 返回顶部 scroll第一个参
  • 在实现返回顶部的功能实现中,一般使用position:fixed进行定位,position:fixed相对于浏览器窗口来进行定位。 当网页并不是响应式而是宽度固定的网页,如果进行缩放,就会出现如下情况: 缩小时,因为fixed,就...
  • jquery返回顶部

    2015-07-16 15:13:24
    如图,当点击蓝色按钮时,网页返回顶部。并且是缓慢上去,而不是一瞬间直接到达最上部。 html很简单,只有一个div. css:注意刚开始处于页面最上部,所以图片一开始是隐藏的,并且位置固定,用position:fixed...
  • 下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部
  • 网页中添加 “返回顶部”按钮

    千次阅读 2015-10-23 11:24:47
    1.首先在body中添加“返回顶部”按钮 body> div class="go-top"> div class="arrow">div> div class="stick">div> div> ... body> 2.css 的定义 div...
  • 就像csdn的这个。是浮动的。到一定的位置才会显示出来。!!!!!!!!!!!!!!!!
  • 返回顶部按钮 制作返回顶部按钮 当浏览页面到第二页的时候显示返回顶部按钮,否则隐藏 点击返回顶部按钮返回到页面顶部 使用getScrollTop()函数 html代码 <body> <p>向下拖动滚动条(进入第二屏),...
  • 网页编程中时常会用到返回网页顶部代码,返回顶部方法只有两种:一种是直接跳转到顶部,二是采用JS添加滚动效果,关于代码方面,天缘一贯的理念,少写点废话,尽量在代码量和体验方面寻求平衡,与其花大力气写个二三...
  • 返回网页顶部的代码

    2016-11-15 09:59:08
    放回网页顶部的js代码如下,能给讲讲吗? function backTop(btnId) { var btn = document.getElementById(btnId); var d = document.documentElement; window.onscroll = set; btn.onclick = function() { ...
  • CSS实现返回网页顶部

    千次阅读 2019-06-10 18:49:00
    <!DOCTYPE html> <html> <head> <meta charset="utf-8">...点击返回置顶</title> <style> #myBtn { display: none; position: fixed; bottom: 20px; right: 3...
  • 点击缓慢滑动返回顶部

    千次阅读 2018-11-19 02:22:44
    返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置。 使用setinerval实现缓慢返回顶部 //核心js代码 var top=...
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 仿新浪网“返回顶部”效果 .backToTop {  display: none;  width: 18px;  line-height: 1.2;  padding: 5px 0

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,159
精华内容 11,663
关键字:

网页返回顶部