Scroll To Top When DIV Clicked? [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 7 years ago.

We all know that scroll to top with named anchors via HTML is possible but is it possible to scroll to the top when another HTML element is clicked that is not surrounded by tags? For instance, a DIV?

EDIT: Apologies all, I did not see this was a duplicate question. I did a search and didn't find anything.

Answer 1

this should work for any block element:

$('#element_id').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

good luck ...

Answer 2

You could listen for a click event on your div and use scrollTo when it is clicked.

window.scrollTo( x-coord, y-coord ):

Scrolls to a particular set of coordinates in the document.

x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left. y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

Answer 3

You can achieve this by using JavaScript:

$("#my-div").on("click", function() {
    window.scroll(0,0);
});

or with jQuery:

$("#my-div").on("click", function() {
    $(window).scrollTop(0);
});

Answer 4

Yes, you might want to do it with Javascript by using

window.scrollTo(0, 0);

and assigning it to the div

<div onclick="window.scrollTo(0, 0);">Element</div>

Answer 5

$('div').on("click",function(){
      $(window).scrollTop(0);
});

You can insert every kind of html tag into the bracket's

Answer 6

if you want to go for jquery solution than you can use

$(document).ready(function() {

    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});

html will be

<a name="top"></a>
...
<a href="#top">Back to top</a>

full article : Scroll to the top of a webpage with jQuery