Scroll Top -  sayfada yukarı çık uygulaması (jQuery)

Scroll Top - sayfada yukarı çık uygulaması (jQuery)

  • 1,890 Kez Okundu
  • Html Css Js
  • 2 Yorum
  • 2015-07-14 20:25:31

Uzunca bir yazıdan oluşan sayfada aşağı indiğinizde yukarı çıkmak için zaman zaman zorluk çekilir. Bunun için sayfa içerisine yukarıdayken görünmeyecek, aşağı doğru inmeye başladığınızda sağ tarafta görünecek bir buton ile bu zorluğun üstesinden kolayca gelinebilir.

Öncelikle kullanılacak ikon dosyasını belirtelim 


Sonra CSS dosyamiza sitilimizi ekleyelim 

Konumu sağ alt köşede ve görünmez olsun

#ScrollTop{
    position: fixed;
    right: 20px;
    bottom: 15px;
    cursor: pointer;
    display: none;
}

İkona tiklandiginda sayfayi yukarıya kaydiralim 

$("#ScrollTop").click(function() {
    $("html,body").stop().animate({ scrollTop: "0" }, 1000);
});

 

Sayfa yukarı çıktığında ikon görünmez olsun, aşağıya indiğinde görünür hale gelsin 

$(window).scroll(function() {
    var length = $(document).scrollTop();
    if (length > 300){
        $("#ScrollTop").fadeIn(500);
    }
    else{
        $("#ScrollTop").fadeOut(500);
    }
});

 

Osman Ökkeş
@Osman Ökkeş demiş ki ;

<a name= 

özelliği ile js kullanmadan daha basit bir şekilde hazırlayamaz mıydık?

admin
@admin demiş ki ;

Tabiki hazırlayabilirdik ama js kullandığımızda geçiş hızını ayarlayabiliriz , kimin nasıl kolayına geliyorsa :)

YORUM YAPMAK İSTER MİSİN?

    Önerilen Video
    Sponsor Reklamlar
    Son Yorumlar
    Etiket Bulutu
    C#PopupFormOtomatikProgramBaşlatmaBaşlangıçBasitEkran Koruyucuc#ekran görüntüsümail göndermeexedllbirleştirmekIL MergePhpMSSQL BAĞLANTIGerçekIPRealTextBinaryConvertÇalışmaSüreHesaplamakBulmakCssjQueryHtmlScroll TopYukarı ÇıkOnMinimizeControlBoxSimge DurumunaKüçültInternetGetConnectedStateİnternetBağlantıKontrolŞifre MatikPassword GeneratorHash ŞifrelemeMD5SHA1SHA256SHA384SHA512Asimetrik ŞifrelemeRSASimetrik ŞifrelemeKriptoŞifrelemeAlgoritmaDESRC2RijndaelTripleDESKeyLogKlavye DinleTuş YakalamaGlobal HookDialogResultÇıkış MesajıUyarı MesajıFormClosingMySQLConnector/NetKullanımSoruCheckBoxListViewÇoklu SilmebiosdramexploitkontrolgüvenlikinteljavascriptrowhammerscriptPHPAdmin PanelResponsiveXtbadminFreeÜcretsizWifiWirelessKeysŞifreAnahtarPasswordKablosuz AğDepolamaŞifreler NeredeKablosuz ŞifreAndroidTelefonNasılYazılırProgramlama DiliHesap MakinesiSEONedirNasıl YapılırAnalizGoogleLinkÖzgünMobilKonuResim Robots.txtSite MapŞifreli GirişŞifreli FormŞifre KoymaŞifreli AçılışCompilingDebuggingDerlemeKarma ModMixed ModeApp.ConfigKurbanBayramMübarek OlsunBlogScriptYonetimAdminPanelText EditorMSHTMLEditorYazıDüzenleyiciEasyAppKolayUygulamaÇalıştırmaAkıllı TelefonKlavyeiOSKeyboardEl YazısıCalculatorMyScriptHand WritingDosya YöneticisiFile ExplorerFTPBluetoothRootTask ManagerGörev YöneticisiSystemTargetWeb Application PentestErrorShowHideHataGösterGizlePDOSelectInsertUpdateDeleteConnectSeçimEklemeSilmeGüncellemeMsSQLVeritabanıÇeviriçiDatabaseConverterDbConvertMaskeli IPGerçek IPTarayıcı Tespitİşletim Sistemi TespitTekil Ziyaretçi BilgileriAktif Ziyaretçi BilgileriZiyaretçi SayacıVirüsTemizlemeFirewallServiceSecurityServiceTimeServicePentestGüvenliksızma TestiuniscanwindowslinuxperlDosyaKlasörListelemekFileFolderListInternetDownloadUploadSpeedMonitorServisMsconfigStartupRunServiceIOSMatematikDenklemÇözümKameraKablosuzinternetHotspotPaylaşımAyarlarKaliLinuxSharedTerminalÖsymDuyuruTimeTimeZoneDateZamanTarihdate()time()FreelancerSerbestÇalışanJobsİşlerWebSiteVersionSürümGeçişUbuntuSunucuApachephpinfo()phpversion()FonksiyonHerseyiKopyalacopyallcopySızma TestiSQLMapWindowsPython810HotSpotWi-FiWlannetshhostednetworkAutoWlanJsGeri SayımTextAreaOtomatik KayıtSayacSaniyeCountDownXtbadminV2AjaxJavaScriptNumaraFormatPhoneNumberFormatTelefonNumarasıDebuggerDetectUnpackerDisassemblerSecurityReverseEngineeringAlgorithmMacDKHOSCTFCapture The FlagForensicTriviaIntelligenceCRC32CRYPTPASSWORD_HASHWin10StoreMağazaMicrosoftReInstallWSLPowerShellPOSTCyberSiberAdli BilişimHackerUSBCDLiveToolsBruterNmapMSSQL ServerMS SQL ExpressMS AccessOracleIBM DB2SybaseInterbaseInformixExceldBase DbfVisual FoxProMySQLConnectionŞifreleri BulCMDLaZagneEthernetTuxCutNetCutNetKillPerformansCronTabCronJobRestartStopStartBashShellWireSharkFlagUSOMBTKBase64QRÇözümlerWriteUpWrite-UpFinalReconOSINTToolScannerWebsiteSiber GüvenlikPhishingVPNWannacry
    Bumerang - Yazarkafe