Question

我有一个基于滚动位置展开或收缩的水平进度条。水平进度条宽度=垂直文档滚动位置。

<div class="progress-bar" style="width:50%;"></div>

有了这个我有一个书签功能，它将插入符号（元素）附加到进度条（元素）。它相对于进度条宽度绝对定位。可以有多个书签。

<div class="progress-bar" style="width:50%;">
    <div class="caret" style="left:50%;"></div>
    <div class="caret" style="left:60%;"></div>
</div>

当我使用左侧位置作为scrollto变量点击每个插入符号时，我想要做的是构建一个scrollto函数。

请参阅https://jsfiddle.net/jabuka/spevhqxv/

谢谢。

Answer 1

我通过定位数据标题来解决问题

<div class="progress-bar" style="width: 50%;">
    <div class="caret" style=" left:50%;" data-title="50"></div>
    <div class="caret" style=" left:60%;" data-title="50"></div>
</div>

scrollto百分比需要工作。

$('body').on('click', '.caret', function() {
    var scrollPerc = $(this).attr('data-title') / 100;
    var dh = $(document).height();
    var scrollAmount = Math.floor(dh * scrollPerc);
    $('html,body').animate({
        scrollTop: scrollAmount
    }, 600);
});

JS Fiddle

滚动到使用数据属性值

1 个答案: