- This topic is empty.
-
AuthorPosts
-
May 24, 2012 at 3:51 pm #38204uddinnyc94Member
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();
});
May 24, 2012 at 4:37 pm #103442jamygoldenMemberHave a look at PlusAnchor.
May 25, 2012 at 1:06 pm #103480uddinnyc94Membersorry 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.
August 19, 2012 at 3:14 pm #108175amolvParticipantand in case of long pages duration needs to be more while animating.
October 13, 2012 at 5:02 am #111776chrisdewarMemberThe 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; }); });
May 17, 2013 at 12:25 pm #135452chettMemberchrisdewar’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?
May 17, 2013 at 3:54 pm #135482CrocoDillonParticipantTry changing this line
if (target.length == 0) target = $('html');
to this
if (target.length == 0) return; // if that doesn't work return false
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.