Question

所以我试图让它成为当你点击旋转木马中的一个链接时，它会将你向下滚动到页面内容。

这是我的jquery：

$('#picks li a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

但是我在控制台中收到此错误错误：语法错误，无法识别的表达式：http://hutchcreative.co.uk/rod/other/#galleryDetails

这是正确的链接位置但不确定如何更正它以便jquery在幻灯片中添加？

谢谢！

Answer 1

如果属性href引用元素的id，则需要在实际ID之前使用#

$('#picks li a').click(function(){
    $('html, body').animate({
        scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

另请注意，这将被触发两次;我知道你添加了html以便与firefox一起工作，I Did一会儿，

所以你可以：

$('#picks li a').click(function(){
        $(Query.browser.mozilla ? "html" : "body").animate({
            scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

或者，至少在之前停止动画：

$('#picks li a').click(function(){
        $('html, body').stop(true,true).animate({
            scrollTop: $( '#'+$.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

为防止此双重调用出现问题

Answer 2

attr方法返回一个包含整个URL的字符串。你需要摆脱字符串中“＃”之前的所有内容。您可以使用indexOf查找“＃”字符的索引，并且可以使用substr仅获取所需字符串的部分。

Answer 3

当我转到你的链接时，我得到的第一个问题是当我尝试从控制台进行测试时$未定义。但是jQuery工作正常，所以你的lib显然已经加载了。

下一个问题是你的代码。你要求href获取整个链接，而不只是哈希标记。

jQuery('#picks li a').click(function(e){
    e.preventDefault();
    var id = $(this).attr('href').split('#');
    id = '#' + id[id.length-1];
    jQuery('html, body').animate({
        scrollTop: $( id ).offset().top
    }, 500);
    return false;
});

Answer 4

我尝试了几种方法，但是没有用。

对我来说，这可以与Angularjs结合使用。

$( "html, body" ).scrollTop( $("#main_div").offset().top );

main_div是您想要的任何HTML元素中的ID。

我不喜欢URL顶部的Angularjs主题标签，这就是为什么我不使用它们的原因。

$location.hash('main_div');

我认为有生命的事情使这复杂化。

jquery scrollTop不工作

4 个答案: