per tornare su

**Salvatore_91** · 22-09-2008, 15:58

Ciao ragazzi, volevo sapere se si può fare (e se potete dirmi il codice)in modo che scorrendo la barra di una pagina web molto lunga, scorra anche un pulsantino, in modo tale che se viene premuto si torna direttamente in alto alla pagina.
:master:

**dav22** · 22-09-2008, 16:17

come questo?

http://www.jtricks.com/javascript/na...ixed_menu.html

spero di si!
ciao

**Salvatore_91** · 22-09-2008, 16:42

Si proprio così. Magari al posto del riquadro una freccia. Scusa, nn sono motlo braavo in inglese, in quella pagina che mi hai dato, trovo il codice?

**dav22** · 22-09-2008, 17:22

certo è un tutorial vediamo se posso semplificarti le cose..

codice:

<div id="fixeddiv" style="   
    position:absolute;   
    width:200px;height:50px;right:10px;top:10px;   
    padding:16px;background:#FFFFFF;   
    border:2px solid #2266AA">   
This is a (Javascript/CSS) Fixed menu.   
</div>

questo è il codice originale HTML per il riquadro se nn ti paice la scritta prova questo sotto che mette una immagine cliccabile

codice:

<div id="fixeddiv" style="   
    position:absolute;   
    width:200px;height:50px;right:10px;top:10px;   
    padding:16px;background:#FFFFFF;   
    border:2px solid #2266AA">   
[img]freccia.jpg[/img]
</div>

nella parte alta del tuo file HTML puoi mettere qc del tipo

<a name="top" ></a>

che richiama l'ancora a cui punta l'immagine.

quello che segue è il codice JS che fa spostare la finestra (lo puoi mettere nel file HTML o meglio ancora in un file nomefile.js che devi però linkare nel documento.

codice:

<script type="text/javascript"><!--   
/* Script by: www.jtricks.com  
 * Version: 20071127  
 * Latest version:  
 * http://www.jtricks.com/javascript/na...ixed_menu.html  
 */  
fixedMenuId = 'fixeddiv';   
  
var fixedMenu =    
{   
    hasInner: typeof(window.innerWidth) == 'number',   
    hasElement: document.documentElement != null  
       && document.documentElement.clientWidth,   
  
    menu: document.getElementById   
        ? document.getElementById(fixedMenuId)   
        : document.all   
          ? document.all[fixedMenuId]   
          : document.layers[fixedMenuId]   
};   
  
fixedMenu.computeShifts = function()   
{   
    fixedMenu.shiftX = fixedMenu.hasInner   
        ? pageXOffset   
        : fixedMenu.hasElement   
          ? document.documentElement.scrollLeft   
          : document.body.scrollLeft;   
    if (fixedMenu.targetLeft > 0)   
        fixedMenu.shiftX += fixedMenu.targetLeft;   
    else  
    {   
        fixedMenu.shiftX +=    
            (fixedMenu.hasElement   
              ? document.documentElement.clientWidth   
              : fixedMenu.hasInner   
                ? window.innerWidth - 20   
                : document.body.clientWidth)   
            - fixedMenu.targetRight   
            - fixedMenu.menu.offsetWidth;   
    }   
  
    fixedMenu.shiftY = fixedMenu.hasInner   
        ? pageYOffset   
        : fixedMenu.hasElement   
          ? document.documentElement.scrollTop   
          : document.body.scrollTop;   
    if (fixedMenu.targetTop > 0)   
        fixedMenu.shiftY += fixedMenu.targetTop;   
    else  
    {   
        fixedMenu.shiftY +=    
            (fixedMenu.hasElement   
            ? document.documentElement.clientHeight   
            : fixedMenu.hasInner   
              ? window.innerHeight - 20   
              : document.body.clientHeight)   
            - fixedMenu.targetBottom   
            - fixedMenu.menu.offsetHeight;   
    }   
};   
  
fixedMenu.moveMenu = function()   
{   
    fixedMenu.computeShifts();   
  
    if (fixedMenu.currentX != fixedMenu.shiftX   
        || fixedMenu.currentY != fixedMenu.shiftY)   
    {   
        fixedMenu.currentX = fixedMenu.shiftX;   
        fixedMenu.currentY = fixedMenu.shiftY;   
  
        if (document.layers)   
        {   
            fixedMenu.menu.left = fixedMenu.currentX;   
            fixedMenu.menu.top = fixedMenu.currentY;   
        }   
        else  
        {   
            fixedMenu.menu.style.left = fixedMenu.currentX + 'px';   
            fixedMenu.menu.style.top = fixedMenu.currentY + 'px';   
        }   
    }   
  
    fixedMenu.menu.style.right = '';   
    fixedMenu.menu.style.bottom = '';   
};   
  
fixedMenu.floatMenu = function()   
{   
    fixedMenu.moveMenu();   
    setTimeout('fixedMenu.floatMenu()', 20);   
};   
  
// addEvent designed by Aaron Moore   
fixedMenu.addEvent = function(element, listener, handler)   
{   
    if(typeof element[listener] != 'function' ||    
       typeof element[listener + '_num'] == 'undefined')   
    {   
        element[listener + '_num'] = 0;   
        if (typeof element[listener] == 'function')   
        {   
            element[listener + 0] = element[listener];   
            element[listener + '_num']++;   
        }   
        element[listener] = function(e)   
        {   
            var r = true;   
            e = (e) ? e : window.event;   
            for(var i = 0; i < element[listener + '_num']; i++)   
                if(element[listener + i](e) === false)   
                    r = false;   
            return r;   
        }   
    }   
  
    //if handler is not already stored, assign it   
    for(var i = 0; i < element[listener + '_num']; i++)   
        if(element[listener + i] == handler)   
            return;   
    element[listener + element[listener + '_num']] = handler;   
    element[listener + '_num']++;   
};   
  
fixedMenu.supportsFixed = function()   
{   
    var testDiv = document.createElement("div");   
    testDiv.id = "testingPositionFixed";   
    testDiv.style.position = "fixed";   
    testDiv.style.top = "0px";   
    testDiv.style.right = "0px";   
    document.body.appendChild(testDiv);   
    var offset = 1;   
    if (typeof testDiv.offsetTop == "number"  
        && testDiv.offsetTop != null    
        && testDiv.offsetTop != "undefined")   
    {   
        offset = parseInt(testDiv.offsetTop);   
    }   
    if (offset == 0)   
    {   
        return true;   
    }   
  
    return false;   
};   
  
fixedMenu.init = function()   
{   
    if (fixedMenu.supportsFixed())   
        fixedMenu.menu.style.position = "fixed";   
    else  
    {   
        var ob =    
            document.layers    
            ? fixedMenu.menu    
            : fixedMenu.menu.style;   
  
        fixedMenu.targetLeft = parseInt(ob.left);   
        fixedMenu.targetTop = parseInt(ob.top);   
        fixedMenu.targetRight = parseInt(ob.right);   
        fixedMenu.targetBottom = parseInt(ob.bottom);   
  
        if (document.layers)   
        {   
            menu.left = 0;   
            menu.top = 0;   
        }   
        fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);   
        fixedMenu.floatMenu();   
    }   
};   
  
fixedMenu.addEvent(window, 'onload', fixedMenu.init);   
//--></script>

spero di averti aiutato.
ciao

davide

**Salvatore_91** · 22-09-2008, 17:37

l'ho fatto, ma non scende il riquadro

**dav22** · 22-09-2008, 17:58

ciao, per semplicità ho messo tutto in una classe ...

codice:

<html>
<head>


</head>
<body><a name="top"></a>




<div id="fixeddiv" style="position:absolute; width:200px;height:50px;right:10px;top:10px; padding:16px;background:#FFFFFF; border:2px solid #2266AA">
This is a (Javascript/CSS) Fixed menu. 

torna suuuuu
</div>

<span id="script_source"><script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20071127
 * Latest version:
 * http://www.jtricks.com/javascript/na...ixed_menu.html
 */
fixedMenuId = 'fixeddiv';

var fixedMenu = 
{
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: document.documentElement != null
       && document.documentElement.clientWidth,

    menu: document.getElementById
        ? document.getElementById(fixedMenuId)
        : document.all
          ? document.all[fixedMenuId]
          : document.layers[fixedMenuId]
};

fixedMenu.computeShifts = function()
{
    fixedMenu.shiftX = fixedMenu.hasInner
        ? pageXOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollLeft
          : document.body.scrollLeft;
    if (fixedMenu.targetLeft > 0)
        fixedMenu.shiftX += fixedMenu.targetLeft;
    else
    {
        fixedMenu.shiftX += 
            (fixedMenu.hasElement
              ? document.documentElement.clientWidth
              : fixedMenu.hasInner
                ? window.innerWidth - 20
                : document.body.clientWidth)
            - fixedMenu.targetRight
            - fixedMenu.menu.offsetWidth;
    }

    fixedMenu.shiftY = fixedMenu.hasInner
        ? pageYOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollTop
          : document.body.scrollTop;
    if (fixedMenu.targetTop > 0)
        fixedMenu.shiftY += fixedMenu.targetTop;
    else
    {
        fixedMenu.shiftY += 
            (fixedMenu.hasElement
            ? document.documentElement.clientHeight
            : fixedMenu.hasInner
              ? window.innerHeight - 20
              : document.body.clientHeight)
            - fixedMenu.targetBottom
            - fixedMenu.menu.offsetHeight;
    }
};

fixedMenu.moveMenu = function()
{
    fixedMenu.computeShifts();

    if (fixedMenu.currentX != fixedMenu.shiftX
        || fixedMenu.currentY != fixedMenu.shiftY)
    {
        fixedMenu.currentX = fixedMenu.shiftX;
        fixedMenu.currentY = fixedMenu.shiftY;

        if (document.layers)
        {
            fixedMenu.menu.left = fixedMenu.currentX;
            fixedMenu.menu.top = fixedMenu.currentY;
        }
        else
        {
            fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
            fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
        }
    }

    fixedMenu.menu.style.right = '';
    fixedMenu.menu.style.bottom = '';
};

fixedMenu.floatMenu = function()
{
    fixedMenu.moveMenu();
    setTimeout('fixedMenu.floatMenu()', 20);
};

// addEvent designed by Aaron Moore
fixedMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' || 
       typeof element[listener + '_num'] == 'undefined')
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = 0; i < element[listener + '_num']; i++)
                if(element[listener + i](e) === false)
                    r = false;
            return r;
        }
    }

    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};

fixedMenu.supportsFixed = function()
{
    var testDiv = document.createElement("div");
    testDiv.id = "testingPositionFixed";
    testDiv.style.position = "fixed";
    testDiv.style.top = "0px";
    testDiv.style.right = "0px";
    document.body.appendChild(testDiv);
    var offset = 1;
    if (typeof testDiv.offsetTop == "number"
        && testDiv.offsetTop != null 
        && testDiv.offsetTop != "undefined")
    {
        offset = parseInt(testDiv.offsetTop);
    }
    if (offset == 0)
    {
        return true;
    }

    return false;
};

fixedMenu.init = function()
{
    if (fixedMenu.supportsFixed())
        fixedMenu.menu.style.position = "fixed";
    else
    {
        var ob = 
            document.layers 
            ? fixedMenu.menu 
            : fixedMenu.menu.style;

        fixedMenu.targetLeft = parseInt(ob.left);
        fixedMenu.targetTop = parseInt(ob.top);
        fixedMenu.targetRight = parseInt(ob.right);
        fixedMenu.targetBottom = parseInt(ob.bottom);

        if (document.layers)
        {
            menu.left = 0;
            menu.top = 0;
        }
        fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
        fixedMenu.floatMenu();
    }
};

fixedMenu.addEvent(window, 'onload', fixedMenu.init);
//--></script>
</span>


</div>





















































scendo scendo????





















































bhoooo :)

</body>
</html>

ah, ho aggiunto anche un link nel riquadrio per tornare su se vuoi puoi anche modificarlo con aggiungendo una immagine..

Ciao

**Salvatore_91** · 22-09-2008, 18:18

Ok grz mille. FATTO

Discussione: per tornare su

Strumenti discussione

Ricerca discussione

Visualizza

per tornare su

Permessi di invio