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

Question

我正在寻找一种方法来包含幻灯片效果,当您单击页面上或下的本地锚点链接时.

我想要一个你有这样一个链接的东西:

<a href="#nameofdivetc">link text, img etc.</a>

也许添加了一个类,所以你知道你希望这个链接是一个滑动链接:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

然后,如果单击此链接,页面将向上或向下滑动到所需位置(可以是div,标题,页面顶部等).

---

这就是我以前的情况:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Answer 1

描述

您可以使用jQuery.offset()和执行此操作jQuery.animate().

查看jsFiddle演示.

样品

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

scrollToAnchor('id3');

更多信息

• jsFiddle示范
• jQuery.offset()
• jQuery.animate()

Answer 2

假设您的href属性链接到具有相同名称的标记id的div(通常),您可以使用以下代码:

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

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

Answer 3

这让我的生活变得如此简单.你基本上把你的元素id标签和它的卷轴放在它没有很多代码

http://balupton.github.io/jquery-scrollto/

在Javascript中

$('#scrollto1').ScrollTo();

在你的HTML中

<div id="scroollto1">

在这里,我一直在页面上

Answer 4

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

Answer 5

您还应该考虑目标具有填充，因此使用position代替offset。您还可以考虑不希望与目标重叠的潜在导航栏。

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})

Answer 6

我使用 jQuery 的方法只是让所有嵌入的锚链接滑动而不是立即跳转

它与Santi Nunez的答案非常相似，但更可靠。

支持

• 多框架环境。
• 在页面加载完成之前。

<a href="#myid">Go to</a>
<div id="myid"></div>

// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);