logo标签列表

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

jqueryjquery-pluginsanchorslide
204
我正在寻找一种方法，当单击页面内的本地锚点链接时，可以包含幻灯片效果，向上或向下滑动页面。我希望有这样一个链接：

。

我想要的是类似于以下链接：

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

也许你需要添加一个类来标识这个链接需要是一个滑动链接:

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

如果单击此链接，则页面会向上或向下滑动到所需位置（可能是

，标题，页面顶部等）。

这是我以前的内容：

    $(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');
    });
});
14个回答
1
你可能需要添加offsetTop和scrollTop值，以防止您不是在动画整个页面，而是某些嵌套内容。 例如：
var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);
1

我在https://css-tricks.com/snippets/jquery/smooth-scrolling/上偶然发现了这个例子，它解释了每一行代码。我认为这是最好的选择。

https://css-tricks.com/snippets/jquery/smooth-scrolling/

你可以选择本地应用：

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

或者使用jQuery：
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        && location.hostname == this.hostname
       ) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });
-1

以下解决方案对我有效：

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );
-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

在这里进行测试：

http://jsbin.com/ucati4

3
请勿包含签名，尤其是带有链接的签名，更尤其是与内容无关的链接。此类信息可以放在您的个人资料中。 - Andrew Barber
所问问题并非如何滚动到页面顶部，而是如何滚动到具有ID的锚点。 - user1380540
有没有办法我可以在WordPress中使用它？我正在将其添加到我的网站上，但它似乎并不起作用。 这是链接：http://scentology.burnnotice.co.za/ - user agent
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接