Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Scroll verticale dolce

  1. #1
    Utente di HTML.it L'avatar di gnola
    Registrato dal
    Jun 2001
    Messaggi
    603

    Scroll verticale dolce

    Ciao a tutti, devo realizzare uno scroll verticale della pagina quando si clicca su dei link ma con l'effetto "dolce"...
    Ho inserito questa funzione ma su alcuni link funge su altri non capisco come mai mi va ad un punto sbagliato della pagina..

    codice:
    $(function(){
    
    
        $('a[href*=#]').click(function() {
        
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            && location.hostname == this.hostname) {
            
                var $target = $(this.hash);
                
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
                
                if ($target.length) {
                
                    var targetOffset = $target.offset().top;
                    
                    $('html,body').animate({scrollTop: targetOffset}, 2000);
                        
                    return false;
                    
                }
                
            }
            
        });
        
    });

    Sui link ho poi messo il codice per delle normali ancore html <a href="#nomesezione">link</a> richiamate poi con <a name="nomesezione"></a> nel punto corrispondente.

    Cosa c'è di sbagliato??

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Potrebbe esserci dei conflitti con i nomi delle ancore? Comunque metti il link alla pagina pubblica (tuosito.xxxx/tuapagina.xxxx)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di gnola
    Registrato dal
    Jun 2001
    Messaggi
    603
    ecco il link..

    http://www.asersrl.com/trentino/

    Il menù con le ancore è il secondo, quello che scrollando la pagina si alza e poi rimane fisso in alto....non è che va in conflitto proprio con questo script..?

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Con IE8 sembrebbe non andare
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it L'avatar di gnola
    Registrato dal
    Jun 2001
    Messaggi
    603
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Con IE8 sembrebbe non andare

    cosa non va con IE8?

    lo script dello scroll dolce non va nemmeno con gli altri browser....ora ho fatto una prova e togliendo l'altro script quello che fa muovere il layer in alto sembra funzionare...quindi potrebbe essere un problema di conflitto?

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Probabilità del 99%
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Quote Originariamente inviata da gnola Visualizza il messaggio
    ecco il link..

    http://www.asersrl.com/trentino/

    Il menù con le ancore è il secondo, quello che scrollando la pagina si alza e poi rimane fisso in alto....non è che va in conflitto proprio con questo script..?
    devi definire top, una volta fatto /stabilito che il punto di partenza sta ad una certa distanza dal top/ dato che hai una parte sopra al tuo menu... lo scroll andrà a segno tenendo conto di tale distanza superiore...

    oppure se definire top diventa complesso...
    prova questo semplice JS:
    codice:
     $(".scroll").click(function(event){
             event.preventDefault();
             var dest=0;
             if($(this.hash).offset().top > $(document).height()-$(window).height()){
                  dest=$(document).height()-$(window).height();
             }else{
                  dest=$(this.hash).offset().top;
             }
             $('html,body').animate({scrollTop:dest}, 1000,'swing');
         });
    dai la classe scroll ai link...
    Interactive Html/CSS/JS Playground | @webbeloz ( cip..cip! )
    Mechanics & Expert Tuning Fix Z3 Roadster Community

  8. #8
    vedi il JS di cui prima, nell'esempio che ho creato...

    http://wblz.co/6sETr


    Interactive Html/CSS/JS Playground | @webbeloz ( cip..cip! )
    Mechanics & Expert Tuning Fix Z3 Roadster Community

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.