So if all the code is relevant, where is...
onclick="scrollByPixels(0, 284)" // javascript: is un-necessary before the function
It would also be a lot more readable with some indentation and separate lines...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
</head>
<body>
<div id="plusmore_btn_header">
<img style="float:left; margin-top:78px; width:380px;"
src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/plustext.png"
alt="web design text header" />
<img style="margin-top:64px;margin-left:6px; width:50px; height:50px;"
src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png"
onmouseover="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn_hover.png'"
onmouseout="this.src='http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/cross_btn.png'"
class="rotate_socialicons"
onclick="scrollByPixels(0, 284)" value="Scroll down 500px">
</div>
<div id="arrow_under_header ">
<img style="float:right; width:503px; margin-right:-40px; height:123px;"
src="http://www.creativdesigns.com/wp-content/themes/CreativDesigns/images/arrow_once.gif"
id="line" alt="web design text header" />
</div>
</body>
</html>