Кнопка Tumblr back to top не работает

0

Я довольно хорошо знаком с HTML и CSS, но для жизни меня не могу заставить эту кнопку "вернуться к началу" работать на моей странице tumblr. Я был бы очень благодарен за то, что помог мне здесь. Я добавил код JQuery, чтобы текст мог исчезать и исчезать при прокрутке (бесконечная прокрутка мимо 100).

Большое спасибо за вашу помощь.

L

    <html>
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>



        <meta name="color:Background" content="#ffffff"/>
        <meta name="color:Text" content="#000000"/>
        <meta name="color:Video Corner Fold" content="red">
        <meta name="font:Font" content="'BrownBold'">
        <meta name="if:Show Captions" content="0"/>
        <meta name="if:Uppercase Links" content="0">
        <meta name="if:Fade On Hover" content="0">
        <meta name="if:Show Tags on Index Page" content="0">
        <meta name="image:header" content="0"/>

<style type="text/css">

#header {
 width:100%;
 height:100%;
 background: url('{image:header}')no-repeat;
 position:fixed;
 margin: 15px 50% 0 50%;
 top:0px;
 left: -300px;
 right: -300px;
 z-index:9999;
}



body {
background-color:{color:Background};
font-family:{font:Font};
color:{color:Text};
font-size:17px;
line-height:25px;
}
a { 
padding-bottom:2px;
color:{color:Text};
text-decoration:none;
border-bottom:2px solid;
}
img {
border: none;
border : 0;
outline:none;
}
a img {
outline: none;
}
iframe#tumblr_controls {  
display:none;
}
#wrapper {
{block:PermalinkPage}
width:580px;
{/block:PermalinkPage}
position:relative;
margin: 50px auto; 
}
#post {
padding:40px;
}
#post img {
width:100%;
}
#post img:hover {
{block:IndexPage}
{block:IfFadeOnHover}
opacity:0.5;
{/block:IfFadeOnHover}
{/block:IndexPage}
}
#post embed, #post iframe {
width:100% !important;
}
#post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
#post .photoset a {
display:none;
}
.title {
width:100%;
text-align:center;
margin:auto;
position:fixed;
top:20px;
z-index:5000;
}
.follow {
position:fixed;
margin: 0px 30% 0 16.3%;
bottom:20px;
z-index:5000;
}
.archive {
position:fixed;
margin: 0px 20px 0 30%;
bottom:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
margin: 0px 0px 0 60%;
bottom:20px;
z-index:5000;
}
#toTop {
width:100%;
margin: 0px 0px 0 43%;
z-index:5000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}

.corner {
top:6px;
right:40px;
position:absolute;
padding:1em 1.5em;
margin:2em auto;
color:#fff;
overflow:hidden;
z-index:4000;
}
.corner:before {
content:"";
position:absolute;
top:0px;
right:0px;
border-width:0 25px 25px 0;
border-style:solid;
border-color:#fff #fff {color:Video Corner Fold} {color:Video Corner Fold};
background:#fff;
display:block; width:0; /* Firefox 3.0 damage limitation */
}
{CustomCSS}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>

<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });
    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    }); 
});
</script>
</head>

<body>

<div id="header"></div>

{block:IfUppercaseLinks}<div style="text-transform:uppercase">{/block:IfUppercaseLinks}
<div class="title"><a href="/">{Title}</a></div>
<div class="archive"><a href="archive">Archive</a></div>
<div class="message"><a href="/ask">Message</a></div>
<div class="follow">{block:PermalinkPage}{block:Posts}<a href="{ReblogURL}" target="_blank">Reblog</a> / {/block:Posts}{/block:PermalinkPage}<a href="http://www.tumblr.com/follow/{Name}">Follow</a></div>
<div class="random"><a href="/random">Random</a></div>
<div id="toTop">Back to top</div>
{block:IfUppercaseLinks}</div>{/block:IfUppercaseLinks}



<div id="wrapper">

{block:Posts}
<div id="post" 
{block:IndexPage}
{block:Post1}style="width:380px"{/block:Post1}
{block:Post2}style="width:410px"{/block:Post2}
{block:Post3}style="width:500px"{/block:Post3}
{block:Post4}style="width:290px"{/block:Post4}
{block:Post5}style="width:320px"{/block:Post5}
{block:Post6}style="width:460px"{/block:Post6}
{block:Post7}style="width:530px"{/block:Post7}
{block:Post8}style="width:280px"{/block:Post8}
{block:Post9}style="width:340px"{/block:Post9}
{block:Post10}style="width:400px"{/block:Post10}
{block:Post11}style="width:260px"{/block:Post11}
{block:Post12}style="width:370px"{/block:Post12}
{block:Post13}style="width:520px"{/block:Post13}
{block:Post14}style="width:310px"{/block:Post14}
{block:Post15}style="width:250px"{/block:Post15}
{/block:IndexPage}
{block:PermalinkPage}style="width:500px"{/block:PermalinkPage}
> 

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}<div class="description">{Description}</div>{/block:Description}
{/block:Link}

{block:Quote}
<a style="border:0 !important" href="{Permalink}">"{Quote}"</a>
{block:Source}
<p>&mdash; {Source}</p>
{/block:Source}
{/block:Quote}

{block:Photo}
{block:IndexPage}<a href="{Permalink}"><div style="border:none"><img src="{PhotoURL-HighRes}"  alt="{PhotoAlt}" border="0"/></div></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<div style="border:none"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photo}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{/block:Chat}

{block:Video}
{block:IndexPage}<a href="{Permalink}"><div class="corner"></div></a>{/block:IndexPage}
<div id="video"> 
{Video-500}
</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Video}

{block:Photoset}
{block:IndexPage}<div class="photoset">{block:Photos}<a href="{Permalink}"><img src="{PhotoURL-HighRes}"></a>{/block:Photos}</div>{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Photoset}

{block:Audio}
{block:AlbumArt}<a href="{Permalink}"><img src="{AlbumArtURL}"></a>{/block:AlbumArt}
<div class="player">{AudioPlayerBlack}</div>
{block:IndexPage}{block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{/block:IndexPage}
{block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}
{/block:Audio}

{block:IfShowTagsOnIndexPage}{block:IndexPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:IndexPage}{/block:IfShowTagsOnIndexPage}{block:PermalinkPage}{block:Date}Posted {TimeAgo} and has {NoteCountWithLabel}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}{/block:Date}{/block:PermalinkPage}

</div>
{/block:Posts}

{block:NextPage}<div id="page-nav"><a href="{NextPage}"></a>{/block:NextPage}

</div>

</body>
</html>
Теги:

2 ответа

0
Лучший ответ

Элемент #header находится выше .archive, #toTop и .random из-за его более высокого z-index (5000/9999).

Если вы сделаете следующее изменение, #toTop является кликабельным и работает по желанию:

#header {
  width: 100%;
  height: 100%;
  background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
  position: fixed;
  margin: 15px 50% 0 50%;
  top: 0px;
  left: -300px;
  right: -300px;
  z-index: 4999;
}

Однако есть еще одна ошибка. Кажется, запрашиваются две версии jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>

Позже, http://masonry.desandro.com/js/jquery-1.7.1.min.js, сбой, поскольку он не может быть найден. Я не понимаю, почему вам нужны две версии jQuery или почему вы горячие ссылки.

Либо используйте CDN (например, первую ссылку), либо загрузите javascript непосредственно в собственный CDN Tumblr.

Поделиться
  • 1
    Блестяще, это прекрасно работает сейчас. Большое вам спасибо, мужик, я действительно очень ценю вашу помощь. Я буду учиться на этом в следующий раз! еще раз спасибо
  • 0
    Рад помочь, добро пожаловать в Stackoverflow!
0

Вместо того, чтобы возиться с scrollTop, просто используйте ссылку.

<a href="#">Scroll to Top</a>

Это вернет вас к вершине. По общему признанию, нет анимаций, но если вы просто ищете базовую функциональность, то это прекрасно.

Поделиться
  • 0
    Это не прокручивает страницу. Это фактически перезагружает это. Вам нужно использовать JavaScript, чтобы он плавно прокручивался без перезагрузки
  • 0
    Здесь вы можете увидеть красивую кнопку прокрутки
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню