Jquery 平滑滚动 Onclick答案

【问题标题】：Jquery Smooth Scroll OnclickJquery 平滑滚动 Onclick
【发布时间】：2012-01-27 02:28:36
【问题描述】：

我目前正在使用来自 css 技巧的平滑滚动脚本。

我遇到的问题是我使用 's 作为链接，使用 onclick 链接指向锚元素。

你可以看到它here。问题是脚本没有寻找我需要的东西，顶部的链接（div）没有被脚本找到，所以不能平滑地滚动到锚点。而 about、services、contact 链接（绿色中的文本链接）滚动流畅。

我是完整的 jquery 和 javascript 菜鸟，不知道如何更改脚本以包含 onclick div 或制作脚本以使其平滑滚动到锚点。

我需要脚本从 div 链接和文本链接顺利滚动，或者我需要一个与 div 链接一起使用的重复脚本（2 个执行文本链接和 div 链接的脚本 - 我只使用 atm 的那个文字）

<script>
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

$('a[href*=#]').each(function() {
  var thisPath = filterPath(this.pathname) || locationPath;
if (  locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
  var $target = $(this.hash), target = this.hash;
  if (target) {
    var targetOffset = $target.offset().top;
    $(this).click(function(event) {
      event.preventDefault();
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
        location.hash = target;
      });
    });
     }
       }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
    return el;
      } else {
    $scrollElement.scrollTop(1);
    var isScrollable = $scrollElement.scrollTop()> 0;
    $scrollElement.scrollTop(0);
    if (isScrollable) {
      return el;
    }
      }
    }
    return [];
  }

    });
</script>

【问题讨论】：

标签： javascript jquery onclick scroll

【解决方案1】：

我不知道你是否使用像 jQuery 这样的 javascript 框架。对于这样的网站，我总是使用 jQuery 插件“Localscroll”。它总是可以跨浏览器正常工作。

您可以在此处查看插件的文档： http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

它非常易于使用。

祝你好运！

【讨论】：

【解决方案2】：

您可以在导航中使用锚点而不是 div，现在您正在这样做

<div id="whatever" onclick="window.location=#portfolio">portfolio</div>

但这不是语义上的，它也不能按照你想要的方式工作，所以 doubleplus 不好。使用

<a id="whatever" href="#portfolio" style="display:block">portfolio</a>

那么来自 css 技巧的代码应该可以工作......如果它是可点击的，它可能应该是一个按钮或一个锚点。

你体内的锚标签按预期工作，顺便说一句......

【讨论】：