taynet29
asked on
Javascript Scroll Page to the top
This simple script scrolls the page to the top of the screen. Whenever I drag the page down to the bottom it continues to scroll. I need this script to just scroll up upon clicking the stop. This just needs to work for one interval. Let me know on any possible solutions. Thanks you guys for youre help.
function pageScroll() {
window.scrollBy(0,-50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()', 5); // scrolls every 100 milliseconds
}
function pageScroll() {
window.scrollBy(0,-50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',
}
Something like this maybe?
<html>
<head>
<script type="text/javascript">
<!--
var scroller;
function startScroll(){
scroller = setInterval("scrollUp();", 5);
}
function stopScroll(){
clearInterval(scroller);
}
function scrollUp(){
window.scrollBy(0, -50);
}
//-->
</script>
</head>
<body>
Top of Page
<br><br><br><br><br><br><b r><br><br> <br><br><b r><br><br> <br><br><b r><br><br> <br><br><b r><br>
<a href="javascript: startScroll();">Start Scroller!</a> < a href="javascript: stopScroll();">Stop Scroller!</a>
<br><br><br><br><br><br><b r><br><br> <br><br><b r><br><br> <br><br><b r><br><br> <br><br><b r><br>
Bottom of Page
</body>
</html>
<html>
<head>
<script type="text/javascript">
<!--
var scroller;
function startScroll(){
scroller = setInterval("scrollUp();",
}
function stopScroll(){
clearInterval(scroller);
}
function scrollUp(){
window.scrollBy(0, -50);
}
//-->
</script>
</head>
<body>
Top of Page
<br><br><br><br><br><br><b
<a href="javascript: startScroll();">Start Scroller!</a> <
<br><br><br><br><br><br><b
Bottom of Page
</body>
</html>
ASKER
Not exactly. I found the function that stops the scrolling, however I have not got it to stop once it reaches the top of the page. The function is clearTimeout(scrolldelay).
function pageScroll() {
window.scrollBy(0,-50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()', 100); // scrolls every 100 milliseconds
if (window.scrollBy(0,0))
clearTimeout(scrolldelay);
}
function pageScroll() {
window.scrollBy(0,-50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',
if (window.scrollBy(0,0))
clearTimeout(scrolldelay);
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Actually, it is probably the question that is the problem. Perhaps, I will try to reword the problem. I have a multi form web application. --> http://banners.mediascape.com/
The third part, "Banner Specifications for ...", you click the tab on top and it brings the place in the form it refers too (the selected vehicle). I need it to not only go to that place in the form but also to the top of the webpage. After that I need to figure out how too make the tabs change depending on the click. I figured javascript would be the best way to accomplish this task. I am open for suggestions. Please let me know so we can come to a resolution. Thank you in advance for you help.
form3.php
<form action="index.php" method="post" enctype="multipart/form-da ta" class="formstyle">
<ul class="shadetabs">
<?php
if (isset($_POST["list2"]) && is_array($_POST["list2"]) && count($_POST["list2"]) > 0)
{
foreach ($_POST["list2"] as $item)
{
$link = str_replace(' ', '_', $item);
echo "<li><a href='#div_$link' onclick='scrollUp()'>$item </a></li>" ;
}
} ?>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
<input type="hidden" name="step" value="<?php echo $step ?>" />
<!--Form 1-->
<input type="hidden" name="campaign" value="<?php echo $campaign ?>">
<input type="hidden" name="hostcomp" value="<?php echo $hostcomp ?>">
<input type="hidden" name="fdafname" value="<?php echo $fdafname ?>">
<input type="hidden" name="klimit" value="<?php echo $klimit ?>">
<input type="hidden" name="linkstyle" value="<?php echo $linkstyle ?>">
<input type="hidden" name="mtagformat" value="<?php echo $mtagformat ?>">
<!--Form 2 -->
<?php foreach ($list2 as $car) { ?>
<input type="hidden" name="list2[]" value="<?php echo $car ?>">
<?php } ?>
<!--Form 3 (Current Form) -->
<?php
$cars = array();
foreach ($_POST['list2'] as $car) {
$car = str_replace(' ', '_', $car);
$details = array(
"format" => isset($_POST["{$car}_forma t"]) ? $_POST["{$car}_format"] : "",
"rotation" => isset($_POST["{$car}_rotat ion"]) ? $_POST["{$car}_rotation"] : "",
"724x90" => isset($_POST["{$car}_724x9 0"]) ? $_POST["{$car}_724x90"] : "",
"300x250" => isset($_POST["{$car}_300x2 50"]) ? $_POST["{$car}_300x250"] : "",
"160x600" => isset($_POST["{$car}_160x6 00"]) ? $_POST["{$car}_160x600"] : "",
"othertx" => isset($_POST["{$car}_other tx"]) ? $_POST["{$car}_othertx"] : "",
"layout" => isset($_POST["{$car}_layou t"]) ? $_POST["{$car}_layout"] : "",
"bannerlink" => isset($_POST["{$car}_banne rlink"]) ? $_POST["{$car}_bannerlink" ] : "",
"button_name_1" => isset($_POST["{$car}_butto n_name_1"] ) ? $_POST["{$car}_button_name _1"] : "",
"button_link_1" => isset($_POST["{$car}_butto n_link_1"] ) ? $_POST["{$car}_button_link _1"] : "",
"button_name_2" => isset($_POST["{$car}_butto n_name_2"] ) ? $_POST["{$car}_button_name _2"] : "",
"button_link_2" => isset($_POST["{$car}_butto n_link_2"] ) ? $_POST["{$car}_button_link _2"] : "",
"button_name_3" => isset($_POST["{$car}_butto n_name_3"] ) ? $_POST["{$car}_button_name _3"] : "",
"button_link_3" => isset($_POST["{$car}_butto n_link_3"] ) ? $_POST["{$car}_button_link _3"] : "",
"button_name_4" => isset($_POST["{$car}_butto n_name_4"] ) ? $_POST["{$car}_button_name _4"] : "",
"button_link_4" => isset($_POST["{$car}_butto n_link_4"] ) ? $_POST["{$car}_button_link _4"] : "",
"button_name_5" => isset($_POST["{$car}_butto n_name_5"] ) ? $_POST["{$car}_button_name _5"] : "",
"button_link_5" => isset($_POST["{$car}_butto n_link_5"] ) ? $_POST["{$car}_button_link _5"] : "",
"button_name_6" => isset($_POST["{$car}_butto n_name_6"] ) ? $_POST["{$car}_button_name _6"] : "",
"button_link_6" => isset($_POST["{$car}_butto n_link_6"] ) ? $_POST["{$car}_button_link _6"] : "",
"button_name_7" => isset($_POST["{$car}_butto n_name_7"] ) ? $_POST["{$car}_button_name _7"] : "",
"button_link_7" => isset($_POST["{$car}_butto n_link_7"] ) ? $_POST["{$car}_button_link _7"] : "",
"button_name_8" => isset($_POST["{$car}_butto n_name_8"] ) ? $_POST["{$car}_button_name _8"] : "",
"button_link_8" => isset($_POST["{$car}_butto n_link_8"] ) ? $_POST["{$car}_button_link _8"] : "",
"button_name_9" => isset($_POST["{$car}_butto n_name_9"] ) ? $_POST["{$car}_button_name _9"] : "",
"button_link_9" => isset($_POST["{$car}_butto n_link_9"] ) ? $_POST["{$car}_button_link _9"] : "",
"button_name_10" => isset($_POST["{$car}_butto n_name_10" ]) ? $_POST["{$car}_button_name _10"] : "",
"button_link_10" => isset($_POST["{$car}_butto n_link_10" ]) ? $_POST["{$car}_button_link _10"] : "",
"file" => isset($_FILES["{$car}_file "]) ? $_FILES["{$car}_file"] : "",
"dspecific" => isset($_POST["{$car}_dspec ific"]) ? $_POST["{$car}_dspecific"] : "",
"disclaimer" => isset($_POST["{$car}_discl aimer"]) ? $_POST["{$car}_disclaimer" ] : "",
);
$cars[$car] = $details;
} ?>
<?php
{
foreach ($cars as $item=>$details){ ?>
<h3 id="<?php echo $item; ?>"><a name="div_<?php echo $item ?>">Banner Specifications for <?php echo $item ?></a></h3>
<div class="step3" style="border-style: solid double;">
<p class="margin">
<label for="<?php echo $item; ?>.format">Format Types:</label>
<select name="<?php echo $item; ?>.format">
<option value="Rich Media Front"<?php if ($details['format'] == "Rich Media Front"){print " selected=\"selected\"";} ?>>Rich Media Front</option>
<option value="Rich Media Mouse over"<?php if ($details['format'] == "Rich Media Mouse over"){print " selected=\"selected\"";} ?>>Rich Media Mouse over</option>
<option value="Rich Media Front and Mouse over"<?php if ($details['format'] == "Rich Media Front and Mouse over"){print " selected=\"selected\"";} ?>>Rich Media Front and Mouse over</option>
<option value="Flash Animation"<?php if ($details['format'] == "Flash Animation"){print " selected=\"selected\"";} ?>>Flash Animation</option>
</select>   ; &nb sp;
<label for="<?php echo $item; ?>.rotation">Rotation %:</label>
<input name="<?php echo $item; ?>.rotation" value="<?php echo $details['rotation']; ?>" size="3" maxlength="3" />
</p>
<p class="margin">
<label>Banner Size:</label>
<input type="checkbox" name="<?php echo $item; ?>.724x90" value="724x90"<?php if ($details['724x90'] == "724x90"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.724x90">724x90</label>& nbsp;  ;
<input type="checkbox" name="<?php echo $item; ?>.300x250" value="300x250"<?php if ($details['300x250'] == "300x250"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.300x250">300x250</label > &nb sp;
<input type="checkbox" name="<?php echo $item; ?>.160x600" value="160x600"<?php if ($details['160x600'] == "160x600"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.160x600">160x600</label > &nb sp; & nbsp;  ;
<label for="<?php echo $item; ?>.othertx">Other:</label>
<input name="<?php echo $item; ?>.othertx" value="<?php echo $details['othertx']; ?>" size="7" maxlength="7" />
</p>
<p class="margin">
<label for="<?php echo $item; ?>.layout">Layout:</label>
<select name="<?php echo $item; ?>.layout">
<option value="na"<?php if ($details['layout'] == "na"){print " selected=\"selected\"";} ?>>NA</option>
<option value="A"<?php if ($details['layout'] == "A"){print " selected=\"selected\"";} ?>>A</option>
<option value="B"<?php if ($details['layout'] == "B"){print " selected=\"selected\"";} ?>>B</option>
<option value="C"<?php if ($details['layout'] == "C"){print " selected=\"selected\"";} ?>>C</option>
<option value="D"<?php if ($details['layout'] == "D"){print " selected=\"selected\"";} ?>>D</option>
<option value="E"<?php if ($details['layout'] == "E"){print " selected=\"selected\"";} ?>>E</option>
<option value="F"<?php if ($details['layout'] == "F"){print " selected=\"selected\"";} ?>>F</option>
<option value="G"<?php if ($details['layout'] == "G"){print " selected=\"selected\"";} ?>>G</option>
<option value="H"<?php if ($details['layout'] == "H"){print " selected=\"selected\"";} ?>>H</option>
<option value="I"<?php if ($details['layout'] == "I"){print " selected=\"selected\"";} ?>>I</option>
</select>   ; &nb sp; & nbsp;  ;
<label for="<?php echo $item; ?>.file">Upload FDAF Logo:</label>
<input type="file" name="<?php echo $item; ?>.file" id="<?php echo $item; ?>.file" />
</p>
<p class="margin">
<label for="<?php echo $item; ?>.bannerlink">Overall Banner Link:</label>
<input name="<?php echo $item; ?>.bannerlink" value="<?php echo $details['bannerlink']; ?>" size="40" />
</p>
<label for="<?php echo $item; ?>.button_num">Number of Buttons</label>
<select name="<?php echo $item; ?>.button_num" onchange="htmlData('script /buttons.p hp', 'ch='+this.value+'&item=<? php echo $item; ?>', '<?php echo $item; ?>_buttons')">
<option value="#">-Select-</option >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="<?php echo $item; ?>_buttons">
</div>
<p class="margin">
<label for="<?php echo $item; ?>.dspecific">Deal Specifics:</label><br />
<textarea rows="2" cols="70" name="<?php echo $item; ?>.dspecific"><?php echo $details['dspecific']; ?></textarea>
</p>
<p class="margin">
<label for="<?php echo $item; ?>.disclaimer">Disclaimer: </label><b r />
<textarea rows="2" cols="70" name="<?php echo $item; ?>.disclaimer"><?php echo $details['disclaimer']; ?></textarea>
</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<?php }
} ?>
</div>
<p class="margin">
<input type="submit" name="prev" value="< Vehicle">
<input type="submit" name="next" value="Review >">
</p>
</form>
The third part, "Banner Specifications for ...", you click the tab on top and it brings the place in the form it refers too (the selected vehicle). I need it to not only go to that place in the form but also to the top of the webpage. After that I need to figure out how too make the tabs change depending on the click. I figured javascript would be the best way to accomplish this task. I am open for suggestions. Please let me know so we can come to a resolution. Thank you in advance for you help.
form3.php
<form action="index.php" method="post" enctype="multipart/form-da
<ul class="shadetabs">
<?php
if (isset($_POST["list2"]) && is_array($_POST["list2"]) && count($_POST["list2"]) > 0)
{
foreach ($_POST["list2"] as $item)
{
$link = str_replace(' ', '_', $item);
echo "<li><a href='#div_$link' onclick='scrollUp()'>$item
}
} ?>
</ul>
<div id="ajaxcontentarea" class="contentstyle">
<input type="hidden" name="step" value="<?php echo $step ?>" />
<!--Form 1-->
<input type="hidden" name="campaign" value="<?php echo $campaign ?>">
<input type="hidden" name="hostcomp" value="<?php echo $hostcomp ?>">
<input type="hidden" name="fdafname" value="<?php echo $fdafname ?>">
<input type="hidden" name="klimit" value="<?php echo $klimit ?>">
<input type="hidden" name="linkstyle" value="<?php echo $linkstyle ?>">
<input type="hidden" name="mtagformat" value="<?php echo $mtagformat ?>">
<!--Form 2 -->
<?php foreach ($list2 as $car) { ?>
<input type="hidden" name="list2[]" value="<?php echo $car ?>">
<?php } ?>
<!--Form 3 (Current Form) -->
<?php
$cars = array();
foreach ($_POST['list2'] as $car) {
$car = str_replace(' ', '_', $car);
$details = array(
"format" => isset($_POST["{$car}_forma
"rotation" => isset($_POST["{$car}_rotat
"724x90" => isset($_POST["{$car}_724x9
"300x250" => isset($_POST["{$car}_300x2
"160x600" => isset($_POST["{$car}_160x6
"othertx" => isset($_POST["{$car}_other
"layout" => isset($_POST["{$car}_layou
"bannerlink" => isset($_POST["{$car}_banne
"button_name_1" => isset($_POST["{$car}_butto
"button_link_1" => isset($_POST["{$car}_butto
"button_name_2" => isset($_POST["{$car}_butto
"button_link_2" => isset($_POST["{$car}_butto
"button_name_3" => isset($_POST["{$car}_butto
"button_link_3" => isset($_POST["{$car}_butto
"button_name_4" => isset($_POST["{$car}_butto
"button_link_4" => isset($_POST["{$car}_butto
"button_name_5" => isset($_POST["{$car}_butto
"button_link_5" => isset($_POST["{$car}_butto
"button_name_6" => isset($_POST["{$car}_butto
"button_link_6" => isset($_POST["{$car}_butto
"button_name_7" => isset($_POST["{$car}_butto
"button_link_7" => isset($_POST["{$car}_butto
"button_name_8" => isset($_POST["{$car}_butto
"button_link_8" => isset($_POST["{$car}_butto
"button_name_9" => isset($_POST["{$car}_butto
"button_link_9" => isset($_POST["{$car}_butto
"button_name_10" => isset($_POST["{$car}_butto
"button_link_10" => isset($_POST["{$car}_butto
"file" => isset($_FILES["{$car}_file
"dspecific" => isset($_POST["{$car}_dspec
"disclaimer" => isset($_POST["{$car}_discl
);
$cars[$car] = $details;
} ?>
<?php
{
foreach ($cars as $item=>$details){ ?>
<h3 id="<?php echo $item; ?>"><a name="div_<?php echo $item ?>">Banner Specifications for <?php echo $item ?></a></h3>
<div class="step3" style="border-style: solid double;">
<p class="margin">
<label for="<?php echo $item; ?>.format">Format Types:</label>
<select name="<?php echo $item; ?>.format">
<option value="Rich Media Front"<?php if ($details['format'] == "Rich Media Front"){print " selected=\"selected\"";} ?>>Rich Media Front</option>
<option value="Rich Media Mouse over"<?php if ($details['format'] == "Rich Media Mouse over"){print " selected=\"selected\"";} ?>>Rich Media Mouse over</option>
<option value="Rich Media Front and Mouse over"<?php if ($details['format'] == "Rich Media Front and Mouse over"){print " selected=\"selected\"";} ?>>Rich Media Front and Mouse over</option>
<option value="Flash Animation"<?php if ($details['format'] == "Flash Animation"){print " selected=\"selected\"";} ?>>Flash Animation</option>
</select>  
<label for="<?php echo $item; ?>.rotation">Rotation %:</label>
<input name="<?php echo $item; ?>.rotation" value="<?php echo $details['rotation']; ?>" size="3" maxlength="3" />
</p>
<p class="margin">
<label>Banner Size:</label>
<input type="checkbox" name="<?php echo $item; ?>.724x90" value="724x90"<?php if ($details['724x90'] == "724x90"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.724x90">724x90</label>&
<input type="checkbox" name="<?php echo $item; ?>.300x250" value="300x250"<?php if ($details['300x250'] == "300x250"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.300x250">300x250</label
<input type="checkbox" name="<?php echo $item; ?>.160x600" value="160x600"<?php if ($details['160x600'] == "160x600"){print " checked=\"checked\"";} ?> />
<label for="<?php echo $item; ?>.160x600">160x600</label
<label for="<?php echo $item; ?>.othertx">Other:</label>
<input name="<?php echo $item; ?>.othertx" value="<?php echo $details['othertx']; ?>" size="7" maxlength="7" />
</p>
<p class="margin">
<label for="<?php echo $item; ?>.layout">Layout:</label>
<select name="<?php echo $item; ?>.layout">
<option value="na"<?php if ($details['layout'] == "na"){print " selected=\"selected\"";} ?>>NA</option>
<option value="A"<?php if ($details['layout'] == "A"){print " selected=\"selected\"";} ?>>A</option>
<option value="B"<?php if ($details['layout'] == "B"){print " selected=\"selected\"";} ?>>B</option>
<option value="C"<?php if ($details['layout'] == "C"){print " selected=\"selected\"";} ?>>C</option>
<option value="D"<?php if ($details['layout'] == "D"){print " selected=\"selected\"";} ?>>D</option>
<option value="E"<?php if ($details['layout'] == "E"){print " selected=\"selected\"";} ?>>E</option>
<option value="F"<?php if ($details['layout'] == "F"){print " selected=\"selected\"";} ?>>F</option>
<option value="G"<?php if ($details['layout'] == "G"){print " selected=\"selected\"";} ?>>G</option>
<option value="H"<?php if ($details['layout'] == "H"){print " selected=\"selected\"";} ?>>H</option>
<option value="I"<?php if ($details['layout'] == "I"){print " selected=\"selected\"";} ?>>I</option>
</select>  
<label for="<?php echo $item; ?>.file">Upload FDAF Logo:</label>
<input type="file" name="<?php echo $item; ?>.file" id="<?php echo $item; ?>.file" />
</p>
<p class="margin">
<label for="<?php echo $item; ?>.bannerlink">Overall Banner Link:</label>
<input name="<?php echo $item; ?>.bannerlink" value="<?php echo $details['bannerlink']; ?>" size="40" />
</p>
<label for="<?php echo $item; ?>.button_num">Number of Buttons</label>
<select name="<?php echo $item; ?>.button_num" onchange="htmlData('script
<option value="#">-Select-</option
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="<?php echo $item; ?>_buttons">
</div>
<p class="margin">
<label for="<?php echo $item; ?>.dspecific">Deal Specifics:</label><br />
<textarea rows="2" cols="70" name="<?php echo $item; ?>.dspecific"><?php echo $details['dspecific']; ?></textarea>
</p>
<p class="margin">
<label for="<?php echo $item; ?>.disclaimer">Disclaimer:
<textarea rows="2" cols="70" name="<?php echo $item; ?>.disclaimer"><?php echo $details['disclaimer']; ?></textarea>
</p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<?php }
} ?>
</div>
<p class="margin">
<input type="submit" name="prev" value="< Vehicle">
<input type="submit" name="next" value="Review >">
</p>
</form>
glad i could help
thanks for the points
thanks for the points
function pageScroll() {
window.scrollTo(0,0);
}
and call, it as onClick="pageScroll()" or just onClick="window.scrollTo(0