网页中“返回顶部”按钮的功能及样式实现

首先,需要把在页面排版顶部的标签设置为top

网页中“回到顶部”按钮的样式以及功能的实现:外层用a标签嵌套,内层设置一个div,其中包含一个图片,div设置大小以及背景颜色,然后a标签的position属性设置为fixed,然后right设置20px;bottom设置20px;且href设置此页面顶部标签的id,target设置_self(在本页面打开)(类似于<a href=”#top” target=_self”)这样按钮就处于右下角了,再点击的时候就会回到顶部

制作此按钮的源代码如下:

html代码:

<a id="top_back" href="#top" target="_self">
      <div>
          <img src="../img/top-1.png">
          <label><strong>top</strong></label>
      </div>
</a>

css代码:

#top_back{
    40px;
    position:fixed;
    right:20px;
    bottom:20px;
    text-decoration:none;
    text-align: center;
    color:skyblue;
}
#top_back img{
    100%;
}

定位位置可以自己改变

以上

希望对大家有所帮助

原文地址:https://www.cnblogs.com/lavender-pansy/p/10272903.html