Go To Anchor Link On Click Event Jquery

As the descriptions says, I've found many things about smooth scrolling and the location property on java script but nothing seems to do what Im looking for which is simply imitate

Solution 1:

So what i get is you want to scroll down to an element without using html anchor tag If i am right Assuming you have a html input tag

<input type="button" id="top" value="button"/>

this script will do the work

P.S #bottom_id is the id of element you want to scroll to. or anchor link:

<a href="#bottom" id="bottom_id"></a>

script:

 $("#top").click(function() {
    $('html, body').animate({
        scrollTop: $("#bottom_id").offset().top
    }, 2000);
});

Solution 2:

The jquery way:

$("body").scrollTop($("[name=elementname]").position().top)

This gets the top of the named element and sets the scroll top position to that location.

There is a jquery plug in which does this effectively, but if you want to stick to straight javascript you can just use element.scrollTo as described on this previous answer;

Better documentation for this can be found on Mozilla's site. With javascript.

Solution 3:

To make JQuery take the user to a different URL than the page (like an anchor tag) attach window.location to the event.

For example, this:

$('#ClickMe').click(function(){ window.location = 'index.php'; });

Would take the user to index.php if he clicks on the element that has the ID "ClickMe" (E.G. ...