Question

我使用锚标记和名称属性完成了这个http://jsfiddle.net/thilakar/WsxJy/3/。

但我需要使用jquery，如下面的链接。 http://www.jibevisuals.com/

点击“关于我们”菜单页面慢慢向上移动。我需要那种工作。

任何建议

提前致谢。

Answer 1

描述

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

查看jsFiddle Demonstration。

示例

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

scrollToAnchor('id3');

更多信息

Answer 2

你的意思是这样的 - ＆gt; http://css-tricks.com/examples/SmoothPageScroll/#source-code？

Answer 3

您可以使用jQuery Animate：

    var $root = $('html, body');
    $('a').click(function() {
    if ($.attr(this, 'href').indexOf("#")!=-1&&$.attr(this, 'href')!="#")
    {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    }
    });

因此，如果您使用以下链接：

<a href="#home"></a>

将锚固件放在正确的位置：

<a id="home"></a>

它会顺利滚动到锚标记。

这个免费的jQuery菜单插件适用于这种方法：PageScroll jQuery Menu Plugin

Answer 4

Snake Eyes答案是最动态的选项，因为您不必编写js中的每个标签。客户端所要做的就是使用HTML解决方案，更好地用于CMS控制。

这个小代码片段就是你所需要的（嗯，当然是jQuery）

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

甚至在页面顶部有一个stickymenu的解决方案，请注意将#main_menu替换为菜单的ID或类：

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var height_menu = $("#main_menu").css("height");
            height_menu = parseInt(height_menu,10);

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                scrollTop: target.offset().top - height_menu
                }, 1000);
                return false;
            }
        }
    });
});

锚标记和名称属性动画滚动

4 个答案:

描述

示例

更多信息