Scroll To Top When DIV Clicked?

Question

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.

score 23 · Accepted Answer · answered Nov 05 '12 at 19:59

23

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

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

answered Nov 05 '12 at 19:59

mas-designs

7,160
1
27
53

1

I actually had to make this code as such to make it work as noted below: jQuery('div').click(function(){jQuery(window).scrollTop(0);}); – Aaron Brewer Nov 05 '12 at 20:24
1

But thank you very much EvilP! :) – Aaron Brewer Nov 05 '12 at 20:25
I needed it without a function on a specific div, works fine: $('#mydiv').scrollTop(0); – Jonny Mar 31 '18 at 16:06

score 9 · Answer 2 · answered Nov 05 '12 at 19:58

9

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>

answered Nov 05 '12 at 19:58

ianaz

2,315
1
25
34

score 6 · Answer 3 · answered Nov 05 '12 at 19:59

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

score 4 · Answer 4 · edited Sep 11 '18 at 18:43

4

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);
});

edited Sep 11 '18 at 18:43

cela

2,059
3
19
37

answered Nov 05 '12 at 19:58

Tobias Krogh

3,340
17
14

score 4 · Answer 5 · answered Nov 05 '12 at 19:59

4

this should work for any block element:

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

good luck ...

answered Nov 05 '12 at 19:59

airyt

344
2
9

score 1 · Answer 6 · answered Nov 05 '12 at 19:57

1

Yes it is possible, you should add event onclick to that element and use .scrollTop()

for more info see scrollTop

answered Nov 05 '12 at 19:57

Anton Baksheiev

2,151
2
12
14

score 1 · Answer 7 · edited Jun 20 '20 at 09:12

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.

Scroll To Top When DIV Clicked?

7 Answers7

Linked