Question

我正在尝试将scrollTop动画编程到当前页面上的位置。我有一个固定的菜单，左边有一些链接，右边有一些div。单击菜单上的链接应该为特定div设置动画。

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').offset().top);
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}

这是动画来纠正地方，但总是从顶部到特定的地方。为什么动画总是从顶部开始，你可以帮助我创建从一个地方到另一个地方的动画效果而不从顶部开始吗？

我还尝试使用'+ ='来计算距离和动画scrollTop，但收到的效果与之前提到的相同。

Answer 1

在您的点击处理程序中，您需要禁止默认行为，这显然包括滚动到窗口顶部：

       public static void readCells()
        {
            var dictionary = new Dictionary<string, List<List<string>>>();

            Console.WriteLine("started");
            var counter = 1;
            var readText = File.ReadAllLines(path);
            var duplicatedValues = dictionary.GroupBy(fullName => fullName.Value).Where(fullName => fullName.Count() > 1);

            foreach (var s in readText)
            {
                List<string> values = s.Split(new Char[] { ',' }).ToList();
                string fullName = values[3];
                if (!dictionary.ContainsKey(fullName))
                {
                    List<List<string>> newList = new List<List<string>>();
                    newList.Add(values);
                    dictionary.Add(fullName, newList);
                }
                else
                {
                    dictionary[fullName].Add(values);

                }
                Console.WriteLine("Full Name Is: " + values[3]);

                counter++;
            }

        }

Answer 2

而不是offset（）。top使用element.scrollTop，你想要元素的滚动位置，而不是元素的顶部位置，它只是在屏幕上的位置（因为它可以向下滚动） ..

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollTop

http://api.jquery.com/scrollTop/

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').scrollTop()); //notice the change
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}

使用jQuery动画scrollTop始终从顶部开始

2 个答案: