[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Javascript Scroll Page to the top

Posted on 2007-11-13
7
Medium Priority
?
14,680 Views
Last Modified: 2013-11-19
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
}
0
Comment
Question by:taynet29
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 25

Expert Comment

by:James Rodgers
ID: 20275361
the setTimeout c\auses the function to be called every 100 miiliseconds if you want a one time scroll on an onclick then change it to

function pageScroll() {
          window.scrollTo(0,0);
}

and call, it as onClick="pageScroll()" or just onClick="window.scrollTo(0,0)"
0
 
LVL 12

Expert Comment

by:netsmithcentral
ID: 20275385
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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript: startScroll();">Start Scroller!</a>&nbsp;&nbsp;<a href="javascript: stopScroll();">Stop Scroller!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Bottom of Page
</body>
</html>
0
 

Author Comment

by:taynet29
ID: 20275820
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);
}
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 25

Accepted Solution

by:
James Rodgers earned 750 total points
ID: 20279971
>>   if (window.scrollBy(0,0))
thid would assume that the second value would always hit 0, it could be anywhere from 0 to -49
and if it was between -1 and -49 this will not evalute to true
try using
document.body.scrollTop
if(document.body.scrollTop <=0)
clearTimeout(scrolldelay);
0
 
LVL 12

Assisted Solution

by:netsmithcentral
netsmithcentral earned 750 total points
ID: 20281733
Sorry, I misunderstood your goal.  You need to query the pageYOffset property.  Try this:

<html>
<head>
<script type="text/javascript">
<!--
function scrollUp(){
      var offy;
      if(self.pageYOffset) {
            offy = self.pageYOffset;
      } else if(document.documentElement && document.documentElement.scrollTop){
            offy = document.documentElement.scrollTop;
      } else {
            offy = document.body.scrollTop;
      }

      if(offy <= 0) return;

      window.scrollBy(0, -50);
      setTimeout("scrollUp()", 500);
}
//-->
</script>
</head>
<body>
Top of Page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript: scrollUp();">Start Scroller!</a>
<br>
Bottom of Page
</body>
</html>
0
 

Author Comment

by:taynet29
ID: 20282326
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-data"  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}_format"]) ? $_POST["{$car}_format"] : "",
      "rotation" => isset($_POST["{$car}_rotation"]) ? $_POST["{$car}_rotation"] : "",
      "724x90" => isset($_POST["{$car}_724x90"]) ? $_POST["{$car}_724x90"] : "",
      "300x250" => isset($_POST["{$car}_300x250"]) ? $_POST["{$car}_300x250"] : "",
      "160x600" => isset($_POST["{$car}_160x600"]) ? $_POST["{$car}_160x600"] : "",
      "othertx" => isset($_POST["{$car}_othertx"]) ? $_POST["{$car}_othertx"] : "",
      "layout" => isset($_POST["{$car}_layout"]) ? $_POST["{$car}_layout"] : "",
      "bannerlink" => isset($_POST["{$car}_bannerlink"]) ? $_POST["{$car}_bannerlink"] : "",
      "button_name_1" => isset($_POST["{$car}_button_name_1"]) ? $_POST["{$car}_button_name_1"] : "",      
      "button_link_1" => isset($_POST["{$car}_button_link_1"]) ? $_POST["{$car}_button_link_1"] : "",
      "button_name_2" => isset($_POST["{$car}_button_name_2"]) ? $_POST["{$car}_button_name_2"] : "",      
      "button_link_2" => isset($_POST["{$car}_button_link_2"]) ? $_POST["{$car}_button_link_2"] : "",
      "button_name_3" => isset($_POST["{$car}_button_name_3"]) ? $_POST["{$car}_button_name_3"] : "",      
      "button_link_3" => isset($_POST["{$car}_button_link_3"]) ? $_POST["{$car}_button_link_3"] : "",
      "button_name_4" => isset($_POST["{$car}_button_name_4"]) ? $_POST["{$car}_button_name_4"] : "",      
      "button_link_4" => isset($_POST["{$car}_button_link_4"]) ? $_POST["{$car}_button_link_4"] : "",
      "button_name_5" => isset($_POST["{$car}_button_name_5"]) ? $_POST["{$car}_button_name_5"] : "",      
      "button_link_5" => isset($_POST["{$car}_button_link_5"]) ? $_POST["{$car}_button_link_5"] : "",
      "button_name_6" => isset($_POST["{$car}_button_name_6"]) ? $_POST["{$car}_button_name_6"] : "",      
      "button_link_6" => isset($_POST["{$car}_button_link_6"]) ? $_POST["{$car}_button_link_6"] : "",
      "button_name_7" => isset($_POST["{$car}_button_name_7"]) ? $_POST["{$car}_button_name_7"] : "",      
      "button_link_7" => isset($_POST["{$car}_button_link_7"]) ? $_POST["{$car}_button_link_7"] : "",
      "button_name_8" => isset($_POST["{$car}_button_name_8"]) ? $_POST["{$car}_button_name_8"] : "",      
      "button_link_8" => isset($_POST["{$car}_button_link_8"]) ? $_POST["{$car}_button_link_8"] : "",
      "button_name_9" => isset($_POST["{$car}_button_name_9"]) ? $_POST["{$car}_button_name_9"] : "",      
      "button_link_9" => isset($_POST["{$car}_button_link_9"]) ? $_POST["{$car}_button_link_9"] : "",
      "button_name_10" => isset($_POST["{$car}_button_name_10"]) ? $_POST["{$car}_button_name_10"] : "",      
      "button_link_10" => isset($_POST["{$car}_button_link_10"]) ? $_POST["{$car}_button_link_10"] : "",            
      "file" => isset($_FILES["{$car}_file"]) ? $_FILES["{$car}_file"] : "",
      "dspecific" => isset($_POST["{$car}_dspecific"]) ? $_POST["{$car}_dspecific"] : "",
      "disclaimer" => isset($_POST["{$car}_disclaimer"]) ? $_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>&nbsp;
            <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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;&nbsp;&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>&nbsp;&nbsp;&nbsp;
              <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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>&nbsp;
            <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="<?php echo $item; ?>.file">Upload FDAF Logo:</label>
            <input type="file" name="<?php echo $item; ?>.file" id="<?php echo $item; ?>.file" />&nbsp;
          </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.php', '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><br />
              <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>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 20282784
glad i could help

thanks for the points
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question