CSS/Javascript Auto Scroll To Top

Question

I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:

#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}

The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens.

The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to.

I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.

I love how it works but can't stand the scrolling issue on smaller screens.

braks · Accepted Answer · 2015-05-03 03:15:26Z

1

There may be some awkwardness in your idea that might just need a redesign, I certainly have never noticed a menu working like this.

But the jQuery code to scroll to the top is this:

$("html, body").animate({
    scrollTop: 0
}, 600);

Where 600 is how long it takes in ms. You'll have to wrap this in a click() function or something so it triggers when someone presses a menu option. For example:

$('#menu a').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
});

And of course all of this code should be wrapped in a $(document).ready() (basic jQuery setup) I know you didn't mention jQuery in your question, but this is a popular approach to solving problems like this.

answered May 3, 2015 at 3:15

braks

1,62818 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jetteh22 Over a year ago

Thanks, I'll look into that. Yeah, the overflow: auto is kind of awkward. I am not sure how to avoid it, though, if there is too much in the menu. I guess if I really want to avoid it I would just need to re-design the menu to have a completely different one for smaller screens but I was just hoping to avoid that.

Nicola Gaioni · Accepted Answer · 2021-08-26 21:41:04Z

0

There is another way to achieve auto scroll on click using html only.

You just need to add an id to some div (the header maybe) and on the link you pass the #id to the href like so:

html

<div id="Header">your header</div>

<a href="#Header">Go to the top</a>

css

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

I'd suggest to try out the scroll-behavior: smooth; it makes the transitions, well... smooth :D

Here you can find all the documentation you need about this solution https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior

answered Aug 26, 2021 at 21:41

Nicola Gaioni

1862 silver badges9 bronze badges

Collectives™ on Stack Overflow

CSS/Javascript Auto Scroll To Top

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related