jQuery平滑滚动Onclick

Question

I am currently using a smooth scroll script from css tricks.

The problem I'm having is that I have used 's as links with onclick links to anchor elements.

You can see it here . The problem is the script doesn't look for what I need it to, the links at the top (the divs) do not get found by the script so do not smoothly scroll to the anchor. Whereas the about, services, contact links (the text ones inside the green thingys) scroll smoothly.

I am complete jquery and javascript noob and do not know how to alter the script to include the onclick divs or to make a script to make it scroll smoothly to the anchors.

I need the script to scroll smoothly from both the div links and text links or I need a duplicate script that works with the div links (2 scripts that do text links and div links - The one I'm using atm only does text)

<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>

Answer 1

I don't know if you use a javascript framework like jQuery. For websites like this I always use the jQuery plugin 'Localscroll'. It always works fine cross-browser.

You can see the documentation for the plugin here: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

It's very easy to use.

Good luck!

Answer 2

You can use anchors instead of divs in the nav, right now you're doing

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

but that's not semantic, and it doesn't work the way you want it to, so that's doubleplus not good. use

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

then the code from css tricks should work... if it's clickable it should probably be a button or an anchor.

the anchor tags in your body work as expected, btw...