Grow your CSS skills. Land your dream job.

Previous CSS Snippet Jquery Smooth Scroll Help

  • # May 17, 2012 at 4:16 pm

    http://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

    # May 17, 2012 at 10:38 pm

    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);
    });
    }
    }
    });
    # May 18, 2012 at 2:45 pm

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

    # May 18, 2012 at 2:47 pm

    so can anyone help me with this

    # May 19, 2012 at 8:09 am

    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

    # May 19, 2012 at 12:19 pm

    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

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".