|
|
| 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;
| |
| − | });
| |
| − | });
| |
