Use jQuery scroll plugin to avoid # on url

2019-09-07 03:48发布

问题:

I want to use scroll jQuery plugin to scroll to anchor tag because I don't want to browser to add # to the end of url when you click links.
I don't want anyone to bookmark url of my web site with #.

<html>
    <body>
        <a name="top"></a>TOP
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <a href="#top">top</top>
    </body>
</html>


Is jQuery.ScrollTo the most standard plugin to do that?
http://demos.flesler.com/jquery/scrollTo/

I want to support IE6, FF4, Chrome, Android, and iphone.
Does jQuery.ScrollTo support them?
Or shouldn't I use the scroll plugin if I need browser comatibility?

回答1:

You don't need a plugin + give your users a nice smooth scroll with scrollTop (live example here - http://jsfiddle.net/7qr3y/9/ ):

HTML:

<a href="#" class="bottomscroll">bottom</a>

jQuery:

$('.bottomscroll').click(function() {
     $('html, body').animate({ scrollTop: $('#bottom').offset().top }, 'slow');
     return false;
 });


回答2:

If you are using a newer version of jQuery.. then preventDefault may be better.

<a name="top"></a>

$(".top").on('click', function(e) {     
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $('#container').offset().top
    }, 500);
});