Question

我发现许多插件都在向上和向下计数，但我正在寻找更有趣的东西：

我有一个70.000厘米高的HTML页面，我想在一个角落放一个计数器，当你向下滚动时，它会显示你所处的高度。

小提琴似乎毫无意义，如果有人遇到过插件或者对于从哪里开始有一点想法，我将非常感激。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $(function() {
        $.fn.calc_height();
        $(window).bind('scroll', function() {
            $.fn.calc_height();
        });
    });

    $.fn.calc_height = function() {
        var window_scroll_top = $(window).scrollTop();
        var window_scroll_top_cm = window_scroll_top * 0.026458333;
        $('.currentheight').html( window_scroll_top_cm.toFixed(2) + ' cm' );
    };
    </script>

    <style>
    body { height:264566.92913386px; background:#666; text-align:center; font-family:Arial, Helvetica, sans-serif;}
    .currentheight { position:fixed; top:20px; left:20px; background:#FFF; color:#000; padding:10px 20px;}
    </style>
</head>

<body>
<div class="currentheight">asd</div>
</body>
</html>

Answer 2

您可以尝试这样的事情：

$(document).scroll(function(){
  $('div').html(($('body').scrollTop() * 0.026458333).toFixed(2) + 'cm');
});

demo

Answer 3

您可以从这个简单的代码行开始，并围绕此构建所需的逻辑和编程量。它基于jQuery内置函数animate，第一个参数包含选项，第二个参数是您尝试的特定动画的时间。

$("html, body").animate({ scrollTop: $(document).height() }, 1000);

干杯：）

jQuery count cm on page scroll - counter

3 个答案: