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 :)?


 

Skype: marianbl7

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>

 


PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

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.


PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

Share this post


Link to post
Share on other sites

Inca putin ajutor gadeas te rog :). Ce trebuie sa pun in globalTemplate (folosesc IPB)?


 

Skype: marianbl7

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

 

Skype: marianbl7

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...