Jump to content
Sign in to follow this  
Xep

Afisare si ascundere top buton la scroll?

Recommended Posts

Buna ziua pct! Am urmatorul cod:

<div><a href='#top'><i class="fa fa-arrow-up"></i></a></div>

Este un buton care ma salta in partea de sus a forumului, cum pot face cand sunt in partea de sus a forumului acel buton sa dispara si cand derulez in jos sa reapara :)?

Share this post


Link to post
Share on other sites

Unde ai vazut tu asa ceva?  In general codurile html au nevoie sa fie insotite de css, chiar si jquery + imagine.

Oricum, acel cod trebuie pus in footer.

Share this post


Link to post
Share on other sites

Astea ultimele doua posturi doar pentru a aduna posturi... Este destul de simplu de inteles ce a vrut omu.

Creeaza un fisier format JS si adauga urmatoru jQuery:

$(document).ready(function() {
	// Daca pozitia de scroll este mai mare de 100, aratam buton-ul de scroll, daca nu, il ascundem
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});
	
	// Eventu care face animatia pentru a sari sus de tot (partea asta este optionala, ii da doar un efect mai frumos)
	$('.scrollToTop').click(function() {
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
});

Va trebui sa modifici codu tau:

<div><a href='#top'><i class="fa fa-arrow-up"></i></a></div>

Cu:

<div><a href='#top' class='scrollToTop'><i class="fa fa-arrow-up"></i></a></div>

Va trebui sa adaugi urmatoarele randuri intre <head></head> sau inainte de inchidere la </body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="Calea spre fisieru JS"></script>

 

Share this post


Link to post
Share on other sites

A intrebat unde se pune, i-am raspuns, ba chiar si cum functioneaza.

Asta este un post pentru +1, chiar am nevoie de posturi, sunt topit dupa ele, asta este si motivul pentru care sunt membru din 2012.

 Daca ajutorul meu nu conteaza pe acest forum, am inteles!

Share this post


Link to post
Share on other sites
8 hours ago, Roberth said:

A intrebat unde se pune, i-am raspuns, ba chiar si cum functioneaza.

Asta este un post pentru +1, chiar am nevoie de posturi, sunt topit dupa ele, asta este si motivul pentru care sunt membru din 2012.

 Daca ajutorul meu nu conteaza pe acest forum, am inteles!

Dau quote la ce a spus in primu post:

Quote

cum pot face cand sunt in capu "forumului" acel buton sa dispara si cand derulez in jos sa reapara 

Cum, nu "unde". E total diferit parerea mea.

@TAZ, hai ca poate ai dreptate, dar e ceva foarte cunoscut in ziua de azi si pe destule site-uri de tutoriale, nu credca era nevoie de copy/paste in cazu asta.. De asta am si spus ca is doua posturi pentru a aduna, parerea mea e ca nu are rost toata conversatia asta sau chiar alea doua intrebari si se putea oferi solutia la subiect mai "direct" sa zic asa.

Share this post


Link to post
Share on other sites
Spoiler

<a rel="nofollow" href="#top" class='scrollToTop'>
    <div id="bttop">
        <i class="fa fa-arrow-up"></i>
    </div></a>

<script>

$(document).ready(function() {
    // Daca pozitia de scroll este mai mare de 100, aratam buton-ul de scroll, daca nu, il ascundem
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });
    
    // Eventu care face animatia pentru a sari sus de tot (partea asta este optionala, ii da doar un efect mai frumos)
    $('.scrollToTop').click(function() {
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});

</script>

De ce nu merge ? :( (este adaugta in global template inainte de </body>)

Edited by Xep

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×