|
|
Line 1: |
Line 1: |
− | {{#tag:html|
| |
− | <foot>
| |
| <div class="t-right-bar"> | | <div class="t-right-bar"> |
| <div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c=html">Next Page</a></div> | | <div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c=html">Next Page</a></div> |
| <div class="t-bar-rocket" id="back-to-top">Return to Top</div> | | <div class="t-bar-rocket" id="back-to-top">Return to Top</div> |
| </div> | | </div> |
− | </foot>
| |
− | .t-right-bar {
| |
− | position: fixed;
| |
− | right: 0;
| |
− | bottom: 10%;
| |
− | width: 48px;
| |
− | height: 48px;
| |
− | z-index: 1000;
| |
− | cursor: pointer;
| |
− | }
| |
− |
| |
− | .t-right-bar > div {
| |
− | float: left;
| |
− | height: 36px;
| |
− | margin-bottom: 1px;
| |
− | border-radius: 20px 0 0 20px;
| |
− | color: #fff;
| |
− | padding-left: 100%;
| |
− | clear: both;
| |
− | white-space: nowrap;
| |
− | font-size: 13px;
| |
− | line-height: 36px;
| |
− | font-style: normal;
| |
− | background-color: #aaa;
| |
− | background-repeat: no-repeat;
| |
− | background-position: 12px center;
| |
− | transition: transform .2s cubic-bezier(.215, .61, .355, 1), padding .2s cubic-bezier(.215, .61, .355, 1), margin .2s cubic-bezier(.215, .61, .355, 1), background-color .2s cubic-bezier(.215, .61, .355, 1)
| |
− | }
| |
− |
| |
− | .t-right-bar > div.active, .t-right-bar > div:hover {
| |
− | transform: translateX(-100%);
| |
− | padding-left: 45px;
| |
− | padding-right: 10px;
| |
− | margin-left: 48px;
| |
− | background-color: #23a0e1;
| |
− | text-decoration: none;
| |
− | color: #fff
| |
− | }
| |
− |
| |
− | .t-right-bar .t-bar-support {
| |
− | background-image: url(../img/icon/support_1.svg); //按钮图标
| |
− | background-position: 14px center;
| |
− | }
| |
− |
| |
− | .t-right-bar .t-bar-rocket {
| |
− | background-image: url(../img/icon/rocket_1.svg); //按钮图标
| |
− | background-position: 19px center;
| |
− | }
| |
− |
| |
− | .t-bar-support a{
| |
− | color: white;
| |
− | }
| |
− |
| |
− | .t-bar-support a:hover{
| |
− | color: #fff
| |
− | }
| |
− |
| |
− | $(".t-right-bar").hide();
| |
− | $(function () {
| |
− | $(window).scroll(function () {
| |
− | if ($(window).scrollTop() > 100) {
| |
− | $(".t-right-bar").fadeIn(500);
| |
− | }
| |
− | else {
| |
− | $(".t-right-bar").fadeOut(500);
| |
− | }
| |
− | });
| |
− |
| |
− | $("#back-to-top").click(function () {
| |
− | $('body,html').animate({scrollTop: 0}, 100);
| |
− | return false;
| |
− | });
| |
− | });
| |