0

When i open my menu and scroll it downwards, close it and reopen it again, the menu stays at that point, but i want it to be opened at top everytime you open it also with an anchor link.

I've added this to close the menu when clicking the link:

$("li > a").on("click", function() {
        $(".drawer-hamburger").trigger("click");
    });

Everything works fine, except that its not going to top after re-opening.

I tried:

$('#div').scrollTop();

But this had no effect. The only thing that worked so far was:

window.location.reload(true)

But I think it's overkill to reload the page every time.

Is there a way to close the menu and return the menu to top after re-opening, on click?

This all has to do with this topic,

Turn blivesta animsition menu into off canvas (push body) menu

but because it's a separate question i thought it would be better to start a new topic.

Edit: Let me be more specific about the situation. I open my menu by clicking the hamburger icon. The list is scrollable so when i go down a bit, click the anchor link, the menu closes and i'm at my anchor point. So far so good. When i reopen the menu, it's still at the point in my menu, where i was scrolling to. But i want to be on top of the menu again after re-opening, without refreshing my page.

Edit #2: Watch the fixed result here : http://codepen.io/Jorus/pen/zBLBpy

Community
  • 1
  • 1
Jorus
  • 127
  • 1
  • 13

3 Answers3

3

You need to translate to 0px:

$("li > a").on("click", function() {
    $(".drawer-menu").css("transform","translate(0, 0) translateZ(0)");
    $(".drawer-hamburger").trigger("click");
});

Edited

polamoros
  • 259
  • 1
  • 7
  • @jorus Can you create a jsfiddle? – polamoros Jul 29 '16 at 11:13
  • I tried in my other topic but didnt work out well. Let me see if i can do it again. – Jorus Jul 29 '16 at 11:17
  • Sorry i cant make it to work in jsfiddle, it's such a complicated website -.- Is there a way to upload my files? Like an alternative temporarily server – Jorus Jul 29 '16 at 12:08
  • Codepen did the job: http://codepen.io/Jorus/pen/zBLBpy Open the hamburger icon, scroll down a little and hit a link e.g. Link 14. The menu closes, open the menu again and watch where scrollpoint in the menu is. Please let me know if it worked. – Jorus Jul 29 '16 at 12:19
  • @Jorus done! You need to translate the drawer to 0px! – polamoros Jul 29 '16 at 12:24
  • Translate is 0 right? Or does it need "px" specific? – Jorus Jul 29 '16 at 12:30
  • Where do you see a translate with another output than 0? – Jorus Jul 29 '16 at 12:40
  • When you scroll down, the element with class drawer-menu changes translate css. – polamoros Jul 29 '16 at 12:50
  • I saw that too, but don't think it's an issue. It should be somewhere in the javascript imo. – Jorus Jul 29 '16 at 13:04
  • Yes but if you want to scroll up, you need to revert de css translation – polamoros Jul 29 '16 at 13:08
  • Astonishing !! Thank you so much! I have one more issue i already referred to in my post. Do you think this menu is easy to transform to a "push body" version, instead of overlay? – Jorus Jul 29 '16 at 14:00
  • You will need to add some js. I will try it later! – polamoros Jul 29 '16 at 14:03
  • would you have another look at it please. I would like it to go top as well when hit the close button and outer space. I tried to add some classes after "li > a", but didnt had effect. – Jorus Aug 01 '16 at 10:17
  • 1
    Simply add the same line in close function. (line 78 of your codepen). – polamoros Aug 01 '16 at 10:29
  • Perfect ! First it didnt work because i added line 109 till 111. Than i added $(".drawer-menu").css("transform", "translate(0, 0) translateZ(0)") to where you said. Also updated my pen. Thanks again. (p.s. did you already found a quick solution to make it off-canvas?) – Jorus Aug 01 '16 at 11:27
0

I like to use this bit of jquery code to scroll the page to a given position.

$("html,body").stop().animate( { scrollTop: 0 }, 1234, "swing" );

The stop() ends any currently running animations, then we define our animation to work on the scrollTop-value, the 0 means absolute top of the page, put in whatever you need, like possibly $('#targetElementId').scrollTop(). The 1234 means it will take 1.234 seconds and "swing" is actually the default easing function - the only alternative is linear.

flowtron
  • 568
  • 3
  • 18
  • With this, my menu stays at his scrolling point, but 'swings' to top of my page. Nice effect but not for my menu. – Jorus Jul 29 '16 at 11:09
  • Please add a description to support the code you have posted in. E.g. why will this solve the problem? – Murray Foxcroft Jul 29 '16 at 16:50
  • While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, as this reduces the readability of both the code and the explanations! – Goodbye StackExchange Jul 29 '16 at 18:56
0

Try

var x = size of body;
window.scrollBy(0, x);

x Is the size of the body in pixels.

window.scrollBy function scrolls a number of pixels, so if you scroll the size of the body, you will always end up at the top.

prgrm
  • 3,053
  • 9
  • 31
  • 70
  • Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – Paritosh Jul 29 '16 at 12:18
  • Perhaps this could help: codepen.io/Jorus/pen/zBLBpy – Jorus Jul 29 '16 at 12:34