javascript - jQuery magicLine垂直滑动

我已经使用jQuery MagicLine作为垂直滑动。我希望这样，当我单击菜单时，该行将停留在该菜单项上，而不像往常一样返回到第一个菜单项。相应地工作。请指教。这是我的代码：

$(document).ready(function() {
  magicline();
});

$(document).ready(function() {
			  $('a[href*=#]').each(function() {
			    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
			    && location.hostname == this.hostname
			    && this.hash.replace(/#/,'') ) {
			      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
			      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
			       if ($target) {
			         var targetOffset = $target.offset().top;

					<!----- JQUERY CLICK FUNCTION REMOVE AND ADD CLASS "ACTIVE" + SCROLL TO THE #DIV--->
			         $(this).click(function() {
						$("#nav_menu li a").removeClass("active");
						$(this).addClass('active');
			           $('html, body').animate({scrollTop: targetOffset}, 1000);
			           return false;
			         });
			      }
			    }
			  });


			});


function magicline() {
  var $el, topPos, newHeight,
    $mainNav = $("#nav_menu");
  //$("#magic_line").remove();
  $mainNav.append("<li id='magic_line'></li>");
  var $magicLine = $("#magic_line");

  $magicLine
    .height($(".current_page_item").height())
    .css("top", $(".current_page_item a").position().top)
    .data("origTop", $magicLine.position().top)
    .data("origHeight", $magicLine.height());

  $("#nav_menu li").find("a").hover(function() {
    $el = $(this);
    topPos = $el.position().top;
    newHeight = $el.parent().height();
    $magicLine.stop().animate({
      top: topPos,
      height: newHeight
    });
  }, function() {
    $magicLine.stop().animate({
      top: $magicLine.data("origTop"),
      height: $magicLine.data("origHeight")
    });
  });
}

$('#nav_menu li a').bind('click', function() {
  $('#nav_menu li').each(function() {
    $(this).removeClass('current_page_item');
  });
  $(this).parent().addClass('current_page_item');
  magicline();
});

nav#nav_wrap {
  position: fixed;
  z-index: 5000;
  top: 40vh;
  right: 15px;
  padding-left: 10px;
  background: url(images/navbg.png) no-repeat left;
}
li{ list-style: none; }
nav#nav_wrap ul {
  width: 115px;
}
nav#nav_wrap ul li {
  margin-bottom: 10px;
}
nav#nav_wrap ul li a {
  color: #fff;
}
nav#nav_wrap ul li a.dot:hover,
nav#nav_wrap ul li a.dot:active {
  background: #52C6C0;
}
nav#nav_wrap .dot.active {
  background: #52C6C0;
}
nav#nav_wrap .dot {
  background: #005F59;
  width: 16px;
  height: 16px;
  display: block;
  border: 2px solid #fff;
}
.menu_title {
  margin-left: 22px;
}
#magic_line {
  position: absolute;
  top: 5px;
  left: 0;
  width: 2px;
  height: 142px;
  background: url(images/marker.png) no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<nav id="nav_wrap" class="nav-wrap">
  <ul class="group navigation" id="nav_menu">
    <li class="current_page_item">
      <a href="#home" class="dot active">
        <div class="menu_title">Home</div>
      </a>
    </li>
    <li>
      <a href="#about" class="dot">
        <div class="menu_title">About</div>
      </a>
    </li>
    <li>
      <a href="#services" class="dot">
        <div class="menu_title">Services</div>
      </a>
    </li>
    <li>
      <a href="#portfolio" class="dot">
        <div class="menu_title">Media</div>
      </a>
    </li>
    <li>
      <a href="#contact" class="dot">
        <div class="menu_title">Contact</div>
      </a>
    </li>
  </ul>
</nav>

谢谢你的帮助。

编辑：
这是一个工作中的JSFiddle。
http://jsfiddle.net/9cg5bqxw/

最佳答案

不可能获得50名代表（现在已经连续49天卡住了哈哈），所以这还不是答案，而是一条评论。

请详细说明您要尝试执行的操作，这对我来说并不明确，代码段或JS Fiddle都不清楚您要问什么。

您是否有某人提供的有效示例，因为：

  当我单击菜单时，该行将停留在该菜单项中，
  而不是像往常一样返回第一个。
  页面的向下箭头，magicline应该可以正常工作。

并不是对要完成的任务的明确解释。

编辑：
我认为这就是您要寻找的：http://jsfiddle.net/xfba1403/8/

什么地方出了错：

有几处错误：

您忘记添加“悬停”功能：

$("#nav_menu li a").hover(function() { $el = $(this); topPos = $el.position().top; newHeight = $el.parent().height(); $magicLine.stop().animate({ top: topPos, height: newHeight }); }, function() { $magicLine.stop().animate({ top: $magicLine.data("origTop"), height: $magicLine.data("origHeight") }); });
您正在使用的图像，也许可以在您的PC上使用，但不能在jsfiddle上使用，所以我将其更改为颜色：

#magic_line { position: absolute; color: black; top: 5px; left: 0; width: 5px; background-color: #fe4902;}

*由于重复/奇怪的使用而我编辑的内容：*

由于某种原因，您两次使用$(document).ready(function(){ // code });。

小费

我建议您开始使用Bootstrap，它已成为建立标准网站的最常用的库，在构建了出色的Alpha之后，您可以轻松对其进行编辑:)

参考：http://getbootstrap.com/