Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Jquery Smooth Scroll to a name and id

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38204
    uddinnyc94
    Member

    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();
    });
    #103442
    jamygolden
    Member

    Have a look at PlusAnchor.

    #103480
    uddinnyc94
    Member

    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.

    #108175
    amolv
    Participant

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

    #111776
    chrisdewar
    Member

    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;  
    });  
    });
    
    #135452
    chett
    Member

    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?

    #135482
    CrocoDillon
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.