Question

我遇到了一些麻烦。我有4个div元素和不同ID的主页。例如：

   <div id='one' class='sectionscroll'></div>
    <div id='two' class='sectionscroll'></div>
    <div id='three' class='sectionscroll'></div>
    <div id='four' class='sectionscroll'></div>

所有这些div都从屏幕上选择高度。当页面加载时，我自动滚动到ID为<div id='two'></div>的div。

从这个位置，我想滚动到另一个位置。但我无法理解如何做到这一点。

这是我的工厂，通过使用ng-click进行慢速滚动定位。

(function () {
    'use strict';

    angular
        .module('app.scroll.home.page', [])
        .factory('$scrollHomePage', $scrollHomePage);

    $scrollHomePage.inject = [];

    function $scrollHomePage() {
        return {
            scrollTo: function(eId) {

                var startY = currentYPosition();
                var stopY = elmYPosition(eId);
                var distance = stopY > startY ? stopY - startY : startY - stopY;
                if (distance < 100) {
                    scrollTo(0, stopY);
                    return;
                }
                var speed = Math.round(distance / 65);
                if (speed >= 250) speed = 250;
                var step = Math.round(distance / 25);
                var leapY = stopY > startY ? startY + step : startY - step;
                var timer = 0;
                if (stopY > startY) {
                    for (var i = startY; i < stopY; i += step) {
                        setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
                        leapY += step;
                        if (leapY > stopY) leapY = stopY;
                        timer++;
                    }
                    return;
                }
                for (var i = startY; i > stopY; i -= step) {
                    setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed);
                    leapY -= step;
                    if (leapY < stopY) leapY = stopY;
                    timer++;
                }

                function currentYPosition() {
                    if ('scrollRestoration' in history) {
                        history.scrollRestoration = 'manual';
                    }
                    if (document.documentElement && document.documentElement.scrollTop)
                        return document.documentElement.scrollTop;
                    if (document.body.scrollTop) return document.body.scrollTop;
                    return 0;
                }

                function elmYPosition(eID) {
                    var elm = document.getElementById(eID);
                    var y = elm.offsetTop;
                    var node = elm;
                    while (node.offsetParent && node.offsetParent != document.body) {
                        node = node.offsetParent;
                        y += node.offsetTop;
                    }
                    return y;
                }
            }

        };
    }
})();

在控制器中我使用了自动滚动

$(window).load(function () {
            $("div.sectionscroll").height($('body').height());
            $location.hash('');
            $scrollHomePage.scrollTo('two');
        });

Answer 1

我已经完成了答案。可能有人需要这个。所以享受它。：）

t=# with tt as (
  with t as (
    select *,j->json_object_keys(j) val,substr(json_object_keys(j),1,63) k
    from so41
  )
  select concat('{',string_agg(concat('"',k,'":',val),',') over (partition by i), '}')::json,i,j
  from t
)
select i,r1.*
from tt
join json_to_record(concat) as r1(a text, b text, this_identifier_is_going_to_be_longer_than_sixty_three_characters_attribute text) on true;
NOTICE:  identifier "this_identifier_is_going_to_be_longer_than_sixty_three_characters_attribute" will be truncated to "this_identifier_is_going_to_be_longer_than_sixty_three_characte"
 i |     a      | b  | this_identifier_is_going_to_be_longer_than_sixty_three_characte
---+------------+----+-----------------------------------------------------------------
 1 | this is a  | 25 | this is c
 1 | this is a  | 25 | this is c
 1 | this is a  | 25 | this is c
 2 | this is a1 | 27 | this is c1
 2 | this is a1 | 27 | this is c1
 2 | this is a1 | 27 | this is c1
(6 rows)

Time: 0.574 ms

Answer 2

嘿@Volodymyr如果我的问题正确，你需要滚动到一个特定的哈希（id of div）您可以使用角色的$anchorScroll和$location服务。

下面的代码将滚动到ID为output的div，如果您想让用户位于比精确div更低的位置，您甚至可以向滚动位置添加偏移量

$anchorScroll.yOffset = 30; // to add extra top margin
$location.hash('output');
$anchorScroll();

然后，您可以在按钮的ng-click或所需内容上调用此功能。

如何使用角度上的鼠标滚轮滚动到项目

2 个答案: