滚动到锚点是不可预测的

Question

我正在尝试构建一个简单的垂直时间轴。你可以点击向上或向下滚动它一点一点但我也想让它跳跃，平滑滚动，到锚点。这有点奏效，但行为无法预测。

这通常很难，但对我来说新的东西是滚动行为在div内部，所以整个页面都不应该移动。

你可以在小提琴中尝试。单击随机按钮有时会将您带到正确的位置，有时它会滚动到随机位置。

JSFiddle

这是基本的Jquery。

#include "opencv2/core.hpp"
#include <string>
#include <map>

namespace cc{
    class Descriptor{
    public:
        virtual void mapParams(std::vector<std::pair<std::string,std::string>> &params) = 0;
        virtual void ComputeDescriptors(cv::Mat &img, cv::Mat1f &descriptors) = 0;
        virtual void ComputeDescriptors(const std::string &fileName, const std::string &imgExt, cv::Mat1f &descriptor);
        virtual void ComputeDescriptors(const std::string &dirPath, const std::string &imgExt, std::vector<cv::Mat1f> &descriptors);
        void setResizeDim(const size_t resizeDim);
        void setSamples (const size_t samples);
        void setOMP(const bool omp);
        virtual ~Descriptor();
    private:
        void ComputeDescriptorsRange(const std::vector<std::string> &files, std::vector<cv::Mat1f> &descriptors, const int start, const int finish, size_t errors);
        size_t resizeDim = 0;   //comput full-size image
        int samples = 0;
        bool omp = true;
    };
}

Answer 1

有些事情需要解决：

• 使用.position().top（相对于偏移的父级）而不是.offset().top（相对于文档）
• 通过使用#timeline
为position: relative容器设置样式来指定偏移父级
• 由于.position()会返回动态计算的值，因此.position().top将是您想要的值减去current-scrollTop。因此，您需要重新添加current-scrollTop。

<强> CSS

#timeline {
    ...
    position: relative;
}

<强>的Javascript

$('.timelineButton').click(function (event) {
    event.preventDefault();
    $('#timeline').animate({
        scrollTop: $($(this).attr('href')).position().top + $('#timeline').scrollTop()
    }, 2000);
});

<强> Demo

Answer 2

将ID添加到每个div＆amp;使用该ID，如href =＆＃34;＃ID＆＃34;。这将滚动窗口到href

中给出的特定部分ID

Answer 3

检查此

$('.timelineButton').click(function () {
    $('#timeline').stop().animate({
       scrollTop: $($(this).attr('href')).offset().top
    }, 2000);
    return false;
});

.is（＆＃39;：动画＆＃39;）会告诉您元素是否为动画，如果没有，则为其设置动画。
它可以防止不可预测的跳跃。

修改
防止这种情况的最佳方法是： .stop（）。animate

listview

EDIT V2
检查这个小提琴：
我必须将每个元素的位置偏移放在一个数组中，因为时间轴中的每个动画都会改变每个元素的offset.top。
检查data-arr =＆＃34; 0＆＃34;在每个按钮上，告诉数组元素必须检索的位置。
告诉我是否有效。
干杯