如何使用jQuery滚动页面上或下到锚点？

9 浏览
0 Comments

如何使用jQuery滚动页面上或下到锚点？

我正在寻找一种方法，当您点击一个链接到页面中的一个本地锚点时，可以实现幻灯片效果。\n我想要的是这样的链接：\n

链接文本、图片等

\n也许还可以添加一个类，以便您知道您希望这个链接成为一个滑动链接：\n

链接文本、图片等

\n然后，如果点击了这个链接，页面就会向上或向下滑动到所需的位置（可以是一个div、标题、页面顶部等）。\n

\n这是我之前的代码：\n

$(document).ready(function(){
    $(".scroll").click(function(event){
        //阻止点击事件的默认操作
        event.preventDefault();
        //获取完整的URL，例如mysitecom/index.htm#home
        var full_url = this.href;
        //通过#分割URL，并获取锚点的名称，例如mysitecom/index.htm#home中的home
        var parts = full_url.split("#");
        var trgt = parts[1];
        //获取目标锚点的顶部偏移量
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;
        //通过将body的滚动顶部设置为锚点的顶部来转到该锚点
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

0

3 答案

0 Comments

问题的出现原因：询问代码中的第二个字符串连接（anchor_id + ""）是否有任何作用。

解决方法：第二个字符串连接（anchor_id + ""）是不必要的，可以直接使用anchor_id。

文章内容如下：

在使用jQuery时，有时我们需要滚动页面到特定的锚点位置。下面是一个使用jQuery实现的滚动至锚点的函数：

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id);
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

然而，有一个问题引起了疑问，就是函数中的第二行代码中的+""的作用是什么。

实际上，JavaScript没有字符串插值的功能，所以使用+来连接字符串或变量，就像"#some_anchor"。在这里，第二个连接anchor_id + ""实际上是不必要的。

非常感谢提问者的问题，希望以上解答能够帮到您！

0
0 Comments

使用jQuery如何滚动页面上下到锚点？

假设您的href属性链接到具有相同名称的标记id的div（通常情况下），您可以使用以下代码：

HTML

Link to div

I'm the div

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

这是一个非常简单但功能强大的解决方法，可以完全控制滚动。我认为这个答案应该得到更多的赞同。

同意，这是最好的解决方法，对我帮助很大。

它确实有效，但会使使用name失去意义。当您使用``时，您也可以从外部引用它，但是您的解决方案无法提供这一点。

以上是关于如何使用jQuery滚动页面上下到锚点的问题的原因和解决方法。

0
0 Comments

问题的原因是想要通过使用jQuery在页面上向上或向下滚动到一个锚点。解决方法是使用jQuery的offset()和animate()函数。

要实现这个功能，可以使用以下代码：

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');

这段代码会滚动到具有指定id的锚点。可以将这段代码应用到所有内部锚点链接上，使用以下代码：

$("a[href^=#]").click(function(e) {   
    e.preventDefault();   
    var dest = $(this).attr('href');   
    console.log(dest);   
    $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); 
});

这段代码将在点击内部锚点链接时触发滚动效果。另外，可以添加history.pushState(null, null, dest);来阻止默认的位置哈希变化。

另外，根据最新的jQuery版本，当使用$("a[href^=\\#]")时，应该对哈希进行转义，以避免问题。关于这个的问题可以在stackoverflow的链接中找到。

对于html和body同时进行动画的目的是确保在不同浏览器和设备上都能正常工作。这样做可能会导致多次滚动，但可以确保在各种情况下都能实现预期的效果。

0