0

I'm making a Wordpress site with my own theme based on underscores. Now, I made a responsive layout using media queries. But I have a kind of aesthetic problem.

I have a button that opens up menu on mobiles. So, on mobile screens we have a logo followed by some text and below that a menu button. THe menu button appears on the bottom as you load the website. If you click it by design it will expand the menu below. Unfortunately unless the user moves down he will not see the menu has opened. And this is a problem as some users might think nothing is happenning.

Therefore I need you to explain me how to use jquery or javascript in order to make users when they press a button to scroll down so that the menu appears on the top of the screen. I tried googling and searching for, but all I could find was how to use scroll with anchors and not buttons.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Nikola L.
  • 346
  • 1
  • 4
  • 14
  • I think you're looking for something like this http://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery Please post your code and we would be able to help you more – Duetschpire Oct 31 '14 at 01:07
  • That's the button code. That buttons appears only if the viewing distance is 600px or less. – Nikola L. Oct 31 '14 at 10:48

1 Answers1

2

You could do this on a button click by using the following code

$('btn').click(function(){
    $('html, body').animate({
        scrollTop: $(document).height() // this will take you to the bottom of the page
    }, 1000);
)}

or

the solution which is given here

$('btn').click(function(){
    $('html, body').animate({
        scrollTop: $('selector').offset().top
    }, 1000);
)}
Community
  • 1
  • 1
Cerlin
  • 6,622
  • 1
  • 20
  • 28
  • Hey. Thank you for your answer. Okay but where do I set this? Since it's wordpress do I need to create a script which contains the above text and then call it from functions.php? Or should I just use this in the php file itself? As I said, when it comes to scripting I'm totally a newbie. I've been doing only css/html/php so far. – Nikola L. Oct 31 '14 at 10:39
  • you can write a `hook` for page load and echo this inside a script tag. also don't forget to wrap this up in side a `$(document).ready()` function. Be sure to replace `'btn'` and `'selector'` with original selector – Cerlin Oct 31 '14 at 10:43
  • I really have no idea what's hook or what's a $document ready thing. I really am trulyha newbie when it comes to scripting. So, really appreciate your help, but it doesn't really help me much because I'm that bad. I do understand the selectors part though – Nikola L. Oct 31 '14 at 10:57
  • without knowing `wordpress hooks` and `jQuery` its very hard to do anything. i would recommend learn those two before doing anything in the project. – Cerlin Oct 31 '14 at 11:01
  • that sounds like a lot of work for a "simple" effect like this :(. Do you have any good quick to learn tutorials about those? Thanks. – Nikola L. Oct 31 '14 at 11:04
  • can i know what is the `menu`'s (the menu which gets expanded in the bottom) html `id`?? if it doesnt hav an `id`, can you add one? – Cerlin Oct 31 '14 at 11:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/64010/discussion-between-cerlin-boss-and-user3088451). – Cerlin Oct 31 '14 at 11:36