Question

我正在尝试为我的Tumblr添加一个动画滚动，我在这个问题中找到了一个：Smooth scroll to div id jQuery。但诀窍是，我需要按钮跳转到Tumblr上的特定帖子。

我发现每个帖子都有一个名为PostID的特定ID，我找到了我需要的特定PostID。我找不到的是在HTML中实际使用PostID，所以我不知道如何定位它。我试过了：

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("post-{130746374784}").offset().top
    }, 2000);
});

但我确信我说错了。谁能告诉我如何定位它？

Answer 1

简单的序言

正如@approxiblue中comment所指出的，Tumblr提供了可用于主题的各种variables，包括PostID。

因此可以替换这样的东西：

<div class="post photo">
    <!-- more HTML here -->
</div>

有这样的事情：

<div class="post photo" id="myPost_{PostID}">
    <!-- more HTML here -->
</div>

允许更直接地定位帖子，如下：

var post = $('#myPost_129129898812');

答案很长

观察Tumblr页面，似乎PostID仅在链接中可用。这意味着我们必须找到包含PostID的链接，然后返回其容器div。

这是主页上Tumblr帖子的一个示例：

<!-- PHOTO POST 
///////////////////////////////////////////////////////-->
<div class="post photo">
    <div class="wide">
        <a href="http://stolenjokescomic.tumblr.com/image/129129898812">
        <img src="http://41.media.tumblr.com/16c2f56a9f739889fbd4896f8524907c/tumblr_nupf28wgLl1toph1no1_1280.png" alt="" />
        </a>
    </div>
    <div class="narrow">
        <div class="metadata">
            <div class="date">
                <a href="http://stolenjokescomic.tumblr.com/post/129129898812">Sep. 15 2015</a>
            </div>
        </div> <!-- metadata end -->
    </div> <!-- narrow end -->
</div> <!-- post end -->

我们会：

使用课程post
使用课程date
使用包含href的属性post/129129898812定位子链接，这是此示例中使用的PostID
使用parents()

post

获得职位

代码：

$("#button").click(function() {
    var position = $('.post .date a[href*="post/129129898812"]')
        .parents('.post')
        .offset().top;

    $('html, body').animate({
        scrollTop: position
    }, 2000);
});

您可以通过以下方式试用：

转到stolenjokescomic
在Firefox中打开暂存器（ SHIFT + F4 ）

粘贴此代码：

$('html, body').animate({
    scrollTop: $('.post .date a[href*="post/129129898812"]')
        .parents('.post').offset().top
}, 2000);

在Firefox中运行它（ CTRL + R ）

页面应向下滚动到帖子。除非你在几个月内阅读这篇文章，否则该帖子不再在主页上。

替代OKMove主题

使用PostID。
获取帖子列表中目标的索引。
获取附加zoomIn功能的元素。
触发点击事件，根据需要多次调用zoomIn功能以达到目标。

代码：

var zoomIn = $('.zoom-in');
var target = $('#content section .about a[href*="post/18629325910"]').parents('section');
var id     = $('#content section').index(target[0]);

for(var i=0; i<id; ++i) {
    zoomIn.click();
}

您可以使用便笺簿在OKMove上试用此代码。

如果这个过快，我们可以使用递归setTimeout：

var zoomIn = $('.zoom-in');
var target = $('#content section .about a[href*="post/18629325910"]').parents('section');
var index  = $('#content section').index(target[0]);

var count = 0;
var weNeedToGoDeeper = function() {

    if(count < index) {
       zoomIn.click();
       setTimeout(weNeedToGoDeeper, 400);
    }

    ++count;
};

weNeedToGoDeeper();

我们可以从任何位置进一步扩展，通过解析transform属性来分析当前位置，然后通过计算我们之间的相对位置来决定缩放的方式和次数。我们想去的地方：

function parseMatrix(s) {
    return (
        s.match(/^matrix3d.(.*).$/) || ['', '0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0']
    )[1].split(', ');
}

var zoomIn  = $('.zoom-in');
var zoomOut = $('.zoom-out');
var content = $('#content');
var target  = $('#content section .about a[href*="post/18629325910"]').parents('section');
var index   = $('#content section').index(target[0]);

var pos = parseMatrix(pos = content.css('transform'))[14];

pos = Math.round(pos/1000);
pos = index - pos;

var zoomElem = pos <= 0 ? zoomOut : zoomIn;

pos = Math.abs(pos);

for(var i=0; i<pos; ++i) {
    zoomElem.click();
}

有没有办法针对特定的Tumblr帖子？

1 个答案:

简单的序言

答案很长

替代OKMove主题