返回顶部按钮

来源:互联网 发布:淘宝多少信用一个钻 编辑:程序博客网 时间:2024/04/30 10:30

在css中返回顶部按钮的方法。

原来在响应式中写返回顶部按钮用的是<a>套<img>的方法。

在非响应式布局当中并要相对简单一些

<a href="#xx" class="totop">Top</a>

        .totop {
            display: none;
            background: url(http://www.xx.xx/backto_top.png) no-repeat;
            position: fixed;
            z-index: 2;
            width: 55px;
            height: 55px;
            bottom: 55px;
            right: 45px;
            font-size: 16px;
            text-indent: -9999px;
        }

按钮最好为半透明或右透明值的,以防止挡住页面主题内容。

,但是在magento中,这并不够用啊。

因为是中间部分加载到模块当中,我们要回到的是顶部,这个时候我们可以这么写。

<a href="javascript:scroll(0,0)" class="totop">Top</a>

这样就可以回到我们的导航栏即真正的顶部了。

不过当回到顶部按钮出现的时候回出现闪烁的情况,因为我们需要做动画过渡处理   

这是用animation写的过渡效果,本来想用transition的。

.add1{
            -webkit-animation: fly 2s;
            animation: fly 2s;
        }
        @-webkit-keyframes fly {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }                                                                                                 

                                                                                                   


0 0
原创粉丝点击