js code execution causes scrolling back to top?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • peppeprof
    #1

    js code execution causes scrolling back to top?

    Hi-

    I need to use self.scrollTo(x ,y) as the last action in a js function called
    by a onClick event. It seems that the scrolling actually takes place, but
    the document is then scrolling back to top when js code execution has ended.

    In the following example I get this effect in IE6 with the third and fourth
    calls, while the first two work fine.

    -------------------------------------------------------------
    <HTML><HEAD><TI TLE>scrollTo</TITLE>
    <script language="JavaS cript" type="text/JavaScript">
    <!--
    function scrollit(s) { self.scrollTo(0 ,s) }
    -->
    </script>
    </HEAD>
    <BODY>
    <FORM name=myForm><IN PUT onclick=self.sc rollTo(0,300) type=button
    value=scroll_(w orks_fine)> </FORM>
    <p onClick="self.s crollTo(0,300)" >scroll with event in paragraph
    (works_fine)</p>
    <p><a href="#" onClick="self.s crollTo(0,300)" >scroll on event onclick in
    anchor (doesn't work)</a></p>
    <p><a href="#" onClick="scroll it(300)">scroll on event onclick in anchor,
    calling a js function (doesn't work)</a></p>
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>1
    0</p>
    <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p>
    </BODY></HTML>
    ----------------------------------------------------------------------------
    ----------------------------------

    Any help highly appreciated

    peppeprof


    Tags: None
    • Randy Webb
      #2
      Re: js code execution causes scrolling back to top?

      peppeprof wrote:[color=blue]
      > Hi-
      >[/color]
      [color=blue]
      > <p><a href="#" onClick="self.s crollTo(0,300)" >scroll on event onclick in
      > anchor (doesn't work)</a></p>[/color]

      Yes it does, it just then immediately follows the href (#) which
      navigates to the top of the page.

      <a href="#" onclick="self.s crollTo(0,300); return false">Now it will
      work, but why are you using js to do what a link can do?</a>



      --
      Randy
      Chance Favors The Prepared Mind
      comp.lang.javas cript FAQ - http://jibbering.com/faq/

        Comment

        • Ivo
          #3
          Re: js code execution causes scrolling back to top?

          "Randy Webb" asked[color=blue]
          >
          > <a href="#" onclick="self.s crollTo(0,300); return false">Now it will
          > work, but why are you using js to do what a link can do?</a>[/color]

          The way of the # would add to the window's history list. scrollTo has no
          such effect.

          Also, some find it better to use a totally empty href instead of the hash
          for these onclick links. I don't remember the reason, but neither do I know
          why the hash is there. Another, afaik equally workable idea is

          <a href="javascrip t:void(' Descriptive statusbar message ')" onclick="...">

          Buttons can be styled to look like links, and vice versa. Which are
          generally to be preferred and why? Am I right in thinking links are easier
          to render for a browser (both visually and in the DOM), that buttons take up
          more resources?
          Ivo


            Comment

            • Lee
              #4
              Re: js code execution causes scrolling back to top?

              Ivo said:[color=blue]
              >
              >"Randy Webb" asked[color=green]
              >>
              >> <a href="#" onclick="self.s crollTo(0,300); return false">Now it will
              >> work, but why are you using js to do what a link can do?</a>[/color]
              >
              >The way of the # would add to the window's history list. scrollTo has no
              >such effect.
              >
              >Also, some find it better to use a totally empty href instead of the hash
              >for these onclick links. I don't remember the reason, but neither do I know
              >why the hash is there.[/color]

              Some older browsers required that the value be a valid URL.
              "#" is a valid URL. "" is not (or at least wasn't recognized as one)


              Another, afaik equally workable idea is[color=blue]
              >
              ><a href="javascrip t:void(' Descriptive statusbar message ')" onclick="...">[/color]

              This method causes unpredictable results if Javascript is
              not enabled.

                Comment

                • peppeprof
                  #5
                  Re: js code execution causes scrolling back to top?

                  > > <p><a href="#" onClick="self.s crollTo(0,300)" >scroll on event onclick in[color=blue][color=green]
                  > > anchor (doesn't work)</a></p>[/color]
                  >
                  > Yes it does, it just then immediately follows the href (#) which
                  > navigates to the top of the page.
                  >
                  > <a href="#" onclick="self.s crollTo(0,300); return false">Now it will
                  > work, but why are you using js to do what a link can do?</a>
                  > Randy[/color]

                  Thanks a lot! I've been really stupid...
                  [color=blue]
                  > but why are you using js to do what a link can do?</a>
                  > Randy[/color]

                  'cause I have a vertical Iframe with many img links, scroll enabled; on
                  click event I want to address a html document in another Iframe, turn
                  visible some layers and hidden some others and, finally, make the menu
                  scroll to have the selected img in vertical middle. If this was to be on the
                  internet I would have probably used php, but this is gonna be a cd.

                  Thank you again

                  peppeprof


                    Comment

                    Previous template Next
                    Working...