Forums

uddinnyc94

okay so here is what i have so far


	 $('a[href^="#"]').click(function() {
		$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 200);
		return false;
		e.preventDefault();
	});

now this code works like a charm but here is the problem it only works like so


	 <a href="#gohere"> Click to smooth Scrool </a>

	 <a id="gohere"> This is where the above link would smooth scroll to </a.

however keeping the code sweet and short i would like for this to work as well


	 <a href="#gohere"> Click to smooth Scrool </a>

	 <a name="gohere"> This is where the above link would smooth scroll to </a.




	 <a href="#comehere"> Click to smooth Scrool </a>

	 <a id="comehere"> This is where the above link second would smooth scroll to </a.

how can i alter this code to just smooth scroll to all id's and names of anchor because the legit way to bookmark in html is using a name however i have so many pages that i bookmarked with both a name and a id i do not want to change the html structure from name to id or from id to name i just want to smooth scroll to both a id and a name anchor links. here is the code i have so far which currently only works with a id and not a name.


	 $('a[href^="#"]').click(function() {
		$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 200);
		return false;
		e.preventDefault();
	});

jamy_za

Have a look at PlusAnchor.

uddinnyc94

sorry but its too much of code. I'd like to keep it simple as possible im pretty sure someone can alter my above code just a little bit to give me what i want so thanks anyway.

amolv

and in case of long pages duration needs to be more while animating.

chrisdewar

The reason it's failing is because you are using this.hash as a selector. In the case of an element id it works, but you can't select a name like that.

Try something like this:

  $(document).ready(function() {
      $('a[href^="#"]').click(function() {
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 500);
          return false;
      });
  });

chett

chrisdewar's code is the only one that seems to work with the Joomla template I'm using, but for a few pages I have the anchors set up as follows:

<a href="#fn:1.footnotes" rel="footnote">1</a>

<li id="fn:1.footnotes">first footnote</li>

because I'm using a jQuery popup for those footnotes. The problem is that when the anchor is clicked the screen scrolls to the top. If I could have the scroll code ignore these anchors that would be fine. If I could get it to work here even better. I've fiddled around a little but I don't yet have the know how to figure it out. Any hints?

CrocoDillon

Try changing this line

  if (target.length == 0) target = $('html');

to this

  if (target.length == 0) return; // if that doesn't work return false

treehouse : what would you like to learn today?

Forums

Jquery Smooth Scroll to a name and id