Grow your CSS skills. Land your dream job.

Jquery Smooth Scroll to a name and id

  • # May 24, 2012 at 3:51 pm

    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

    Have a look at PlusAnchor.

    # May 25, 2012 at 1:06 pm

    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.

    # August 19, 2012 at 3:14 pm

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

    # October 13, 2012 at 5:02 am

    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;  
    });  
    });
    
    # May 17, 2013 at 12:25 pm

    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?

    # May 17, 2013 at 3:54 pm

    Try changing this line

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

    to this

    if (target.length == 0) return; // if that doesn't work return false
    
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".