jQuery Scroll Bottom

Question

I searched this site but all I found is jQuery scrolling to top. How can I scroll to certain link or bookmark in bottom?

e.g. if I click a button: <a href="page.php?#contact_us">Contact Us</a> then it should scroll the page down to bookmark: <a name="contact_us"></a> with jQuery. How can I go about this?

Then use a [plugin](https://github.com/flesler/jquery.scrollTo) — adeneo, Dec 28 '13 at 12:58
Is there anything simple? I actually do not want to clutter jquery codes in my site. I want simple smooth scrolling. Is there anythi9ng like this available? — user2854563, Dec 28 '13 at 12:59
Just use jQuery animate in an event handler, that's about easy as it gets, or switch to Opera, it animates scrolling? — adeneo, Dec 28 '13 at 13:02
Can you please give any solution or example for this `jQuery animate in event handler`? Thank you — user2854563, Dec 28 '13 at 13:03
http://stackoverflow.com/questions/20503288/anyway-to-use-scrolltop-but-retain-the-hashtag — adeneo, Dec 28 '13 at 13:05

score 2 · Accepted Answer · answered Dec 28 '13 at 13:15

You can try this code too:

function scrollToAnchor(aid){
   var aTag = $("a[name='"+ aid +"']");
   $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$(".link").on('click', function() {
   scrollToAnchor(this.id);
});

Fiddle in action

Here .link is the class name of your anchor tag and id1, id2, id3..and so on is the id for each anchor, and you have to bind an click event on anchor link and pass the id in the function named scrollToAnchor(aid){...} where aid is the param for id which is passed from the bound event.

score 0 · Answer 2 · answered Dec 28 '13 at 13:14

Try jQuery animateScroll (http://plugins.compzets.com/animatescroll/), this plugin will add you smoth css3 effect.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="animatescroll.js">
    </head>
    <body>
        <div id="section-1">This is the element where you want to scroll to<div>

        // You may call the function like this
        <a onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>
    </body>
</html>

morrsky · Answer 3 · 2013-12-28T15:54:30.660

how about this

Fiddle Link

<script type="text/javascript">
$( document ).ready(function() {

    function scrollToByName(element) {
        // read target name, remove hash-tag
        var aTargetName = element.attr('href').split("#");
        var sTargetName = aTargetName[aTargetName.length-1];
        var jqTarget = $("a[name=" + sTargetName + "]");
        var sSpeed = "slow";

        // check if element exists
        if (jqTarget.length > 0) {
            // animate view to the target
            $('html,body').animate({scrollTop: jqTarget.offset().top}, sSpeed);
        }
    }

    $('.scroll-trigger').on('click', function (event) {
        // prevent default 'jump'
        event.preventDefault();
        scrollToByName($(this));
        return false;
    });
});
</script>

with html

the trigger

<a href="page.php?#contact_us" class="scroll-trigger">Take me there.</a>

and the target

<a name="contact_us" href="#">Contact us</a>

Hope it works for you.

jQuery Scroll Bottom

3 Answers3