-1

On my wordpress site, I have created an button that, upon clicking it, will send you to a specific scroll position on the website. This is working great. My issue is getting this code to run once the web page has finished loading. Specifically to scroll to a position on the page that will hide the page header unless the user scrolls back to the top.

This is the JavaScript I've been attempting to use:

    <body onLoad="pageScroll(240)">

For reference, this is the HTML of the button I've created:

    <button onclick="document.documentElement.scrollTop = 240;document.body.scrollTop =240;">
    Click to scroll to beginning of content
    </button>
    </div>

Here is the entire contents of the header.php file:

http://pastebin.com/YxknizFU

I used pastebin because I couldn't figuire how to format the code properly

user3916546
  • 3
  • 1
  • 4
  • Can you post your script? Are you using jQuery? – Tomás Cot Aug 07 '14 at 01:56
  • @TomásCot jQuery is installed in my wordpress site, if that's what you're asking. Please forgive me, I'm really new to all this. – user3916546 Aug 07 '14 at 02:02
  • Can you add the `pageScroll` function's code? – Tomás Cot Aug 07 '14 at 02:06
  • @TomásCot What I've put in the main post is actually all I've got. Unfortunately, I'm clearly missing something big. I think I would be able to get the script I currently have to work if I knew how to make it run when the page loads. – user3916546 Aug 07 '14 at 02:07
  • @TomásCot As I'm doing this in a wordpress enviornment, would I place this code in a certain file? If so, what do I surround the code with to tell wordpress to run the script? I've previously tried putting this code in the footer template, but this hasn't changed anything. – user3916546 Aug 07 '14 at 02:09
  • unless you have a function `pageScroll` defined, all your code will do is throw errors. Look in browser console to see if errors thrown – charlietfl Aug 07 '14 at 02:09
  • 1
    Saying you are new doesn't help, because the answer will never be "this code only works for experienced programmers: xyz". Its just fluff and questions should be kept to just the actual question itself, no fluff. – JK. Aug 07 '14 at 02:12
  • the code in the header.php doesn't have the `onload` attribute added to the body tag. – Tomás Cot Aug 07 '14 at 02:41

2 Answers2

0

To use your code, then try with this:

<body onload="document.body.scrollTop = 240">

You have to add the onload like this:

</head>

<body <?php body_class(); ?> onload="pageScroll(0, 240)">
<div id="page" class="hfeed site">
Tomás Cot
  • 992
  • 1
  • 8
  • 18
0

If I understand your problem correctly then, all you need is to put your javascript scroll function on onload event,

<!DOCTYPE html>
<html>
<head>
<script>
function scrollToPosition()
{
  //put scroll logic here which you have set for button click event
 //alert("Page is loaded");
}
</script>
</head>
<body onload="scrollToPosition()">
<h1>Example</h1>
</body>
</html>

or look into this thread

body onLoad on a specific WordPress page

Community
  • 1
  • 1
amighty
  • 784
  • 4
  • 12