-1

由于 css 属性，我滚动到 div 标签的边距顶部太多。所以我认为 jquery 是解决这个问题的最佳解决方案。

我不确定为什么这不起作用，我对 Js 和 Jquery 很陌生。非常感谢我们的任何帮助。

下面是对 Js 的快速浏览。我发现当您的 div id 在容器中时，将 ('html, body') 更改为 ('container)

这是我的jsfiddle 

     jQuery(document).ready(function($){
var prevScrollTop = 0;
var $scrollDiv    = jQuery('div#container');
var $currentDiv   = $scrollDiv.children('div:first-child');

var $sectionid    = 1;
var $numsections  = 5;

$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        if ($sectionid+1 > $numsections) {
            console.log("End Panel Reached");
        }
        else {
            $currentDiv = $currentDiv.next().scrollTo();
            console.log("down");
            console.log($currentDiv);
            $sectionid=$sectionid+1;
            console.log($currentDiv.attr('id'));
            var divid =$currentDiv.attr('id');
            jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
            }
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        if ($sectionid-1 == 0) {
            console.log("Top Panel Reached");
        }
        else {
            $currentDiv = $currentDiv.prev().scrollTo();
            console.log("up");
            console.log($currentDiv);
            $sectionid=$sectionid-1;
            var divid =$currentDiv.attr('id');
            jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

            }
    }
    prevScrollTop = curScrollTop;
});
});
4

1 回答 1

2

我不完全确定您想要什么，但<div>使用 jQuery 滚动到 a 比您的代码更简单。

例如，这段代码用更平滑的滚动替换了锚点的自动跳转行为：

$(document).ready(function(e){
    $('.side-nav').on('click', 'a', function (e) {
        var $this = $(this);
        var top = $($this.attr('href')).offset().top;

        $('html, body').stop().animate({
            scrollTop: top
        }, 'slow');

        e.preventDefault();
    });
});

您当然可以top通过添加或删除变量来调整变量，例如：

var top = $($this.attr('href')).offset().top - 10;

我还从中做了一个小提琴（在您的 HTML 之上）：http: //jsfiddle.net/Qn5hG/8/

如果这对您没有帮助或您的问题有所不同，请澄清！

编辑：

你的小提琴的问题：

  • 未引用 jQuery
  • jQuery(document).ready()如果使用“onLoad”选择了 jQuery 框架，则不需要。删除 JavaScript 的第一行和最后一行。
  • 您的 HTML中没有div#container，因此没有理由检查它的滚动位置。并且滚动事件永远不会触发它。
  • 您的 HTML 无效。最后有很多未闭合的元素和随机标签。确保它是有效的。
  • 很难弄清楚你的小提琴应该做什么。
于 2013-05-05T13:57:05.210 回答