Question

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

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

以下是Js的简要介绍。我发现你的div id在容器中时将（'html，body'）更改为（'container）

     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;
});
});

Answer 1

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

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

$(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

如果使用“onLoad”选择了jQuery框架，则不需要jQuery(document).ready()。删除JavaScript的第一行和最后一行。

HTML中没有div#container因此没有理由检查它的滚动位置。滚动事件永远不会触发它。

您的HTML无效。最后有很多未闭合的元素和随机标签。确保它有效。

很难弄清楚你的小提琴应该做什么。

使用Jquery滚动到Div ID

1 个答案: