www.webdeveloper.com
Results 1 to 3 of 3

Thread: Scroll-To on Page-View - HowTo realize???

  1. #1
    Join Date
    Jun 2013
    Posts
    1

    Question Scroll-To on Page-View - HowTo realize???

    Hello,

    I want to implement something Special onto my site, but I don't know how to do it.
    On my site I use a big Header Image. I have made a small sketch:

    http://s1.directupload.net/images/130615/lmsvok5s.png

    On a page view I want to scroll to a defined Position. On the sketch above I have set for example a value of 30% height.
    My site is full-responsive - The height and width of the Header Image will get scaled automatically.

    Code:
    img {
        max-width: 100%;
        height: auto;
    }
    Therefore I can't use something like "scroll to 200px ..." because the height of the Image varies.
    My english is not the best, but I hope you understand the "challenge".
    I also have created a mock-up how it should look like:

    http://s7.directupload.net/images/130615/zcq9ndca.jpg

    I don't have experience with Javascript.
    I think also Facebook uses the same technique, when the user-Profile is beeing shown. Not the full profile-banner is visible - Only the bottom-part of the Image.

    I have created a small example at "JSFIDDLE".

    http://jsfiddle.net/tomahawx/MMgXu/161/
    Perhaps anyone could help me and tell me on the Basis of the JSFIDDLE how I could realize it.

    Thank you!

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Meiner meinung nach, you can use offsetTop (See this page about Find position) to calculate the position.
    Then you do not need jQuery to scroll to this position with the «crossbrowser» method scrollTo (see w3schools.com). Begrüßung.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcScrollTo(id,ms){
     var obj=typeof(id)=='string'?document.getElementById(id):id,ms=typeof(ms)=='number'&&ms>0?ms:1000,s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop],t=[0,0];
     if (obj){
      while(obj){
       t[0]+=obj.offsetLeft;
       t[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      animate(s[0],s[1],t[1],new Date(),ms,Math.PI/(2*ms));
      return false;
     }
    }
    
    
     function animate(x,f,t,srt,mS,i){
      var oop=animate,ms=new Date().getTime()-srt,n=(t-f)*Math.sin(i*ms)+f;
      clearTimeout(oop.dly);
      if (isFinite(n)){
       window.scrollTo(x,n);
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ animate(x,f,t,srt,mS,i); },10);
      }
      else {
        window.scrollTo(x,t);
      }
     }
    
    /*]]>*/
    </script></head>
    
    <body>
    
    <input id="top" type="button" name="" value="Goto Linka 1" onmouseup="zxcScrollTo('link1',2000);"/>
    <div style="height:500px;" ></div>
    <a id="link1" onmouseup="zxcScrollTo('link2',100);" >Link 1</a>
    <div style="height:500px;" ></div>
    <span id="link2"  onmouseup="zxcScrollTo('link3',1000);">Link 2</span>
    <div style="height:500px;" ></div>
    <a href="#" id="link3" onmouseup=" return zxcScrollTo('top',500);" >Link 3</a>
    <div style="height:700px;" ></div>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles