Forums

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

Home Forums CSS Previous CSS Snippet Jquery Smooth Scroll Help

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

    https://css-tricks.com/snippets/jquery/smooth-scrolling/ that is the snippet for the code i need help with. May you please help me in adding a piece of line that would prevent the hash mark or anything related to the anchor tag from appearing in the URL bar. When someone clicks an anchor tag i would like for the smooth scroll to happen and thats it no hash marks in the url after a tag is clicked please help me someone

    #103006
    Taufik Nurrohman
    Participant

    Why you don’t like #hash? -..-

      $('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;
    // });
    $(scrollElem).animate({scrollTop: targetOffset}, 400);
    });
    }
    }
    });
    #103061
    uddinnyc94
    Member

    the code works fine the thing is that the hash when clicked on the a tag makes the url bar very ugly in myopinion

    #103063
    uddinnyc94
    Member

    so can anyone help me with this

    #103093
    Taufik Nurrohman
    Participant

    Try to use the simple method:

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

    Demo: http://codepen.io/pen/tovic/smooth-scroll-to-hash/1

    #103098
    uddinnyc94
    Member

    wow thanks man you are freaking great i took down all the previous code i got from the url i originally posted that chris posted under jquery smooth scrolling and just added yours so freaking simple. However would you know how to make external links smooth scroll as well. Say this my website is http://www.cyberfanatic.com/ right and so if i post a link like so http://www.cyberfanatic.com#footer can you make it so that when the page is done loading it will smooth scroll to the footer. Basically smooth scroll to external anchor links

    #103180
    Taufik Nurrohman
    Participant
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.