<\/div>\n

Bir web sitesine Scrollbar a\u015fa\u011f\u0131ya do\u011fru kayd\u0131k\u00e7a sitenin \u00fcst k\u0131s\u0131mlar\u0131na d\u00f6nmeyi kolayla\u015ft\u0131racak “Yukar\u0131 \u00c7\u0131k” butonu koymak iyi fikir gibi geliyor.Hem sitenin \u00fcst k\u0131s\u0131mlar\u0131n\u0131 kullan\u0131c\u0131ya hat\u0131rlatacakt\u0131r hem de g\u00f6r\u00fcnmeyen \u00fcst k\u0131s\u0131mlarda slayt vs. gibi de\u011fi\u015fken haberler bu buton vesilesiyle daha verimli kullan\u0131c\u0131 ilgisine maruz kalacakt\u0131r.<\/p>\n

Bu yaz\u0131mda sizlere payla\u015faca\u011f\u0131m JQuery kodlar\u0131 ile bu i\u015flemi animasyonlu bir \u015fekilde ger\u00e7ekle\u015ftirebilece\u011fiz.<\/p>\n

\r\n  <script type="text\/javascript">\r\n      $(function() {\r\n          $("#top").click(function() {\r\n              $("html,body").stop().animate({ scrollTop: "0" }, 1000);\r\n          });\r\n      });\r\n      $(window).scroll(function() {\r\n          var uzunluk = $(document).scrollTop();\r\n          if (uzunluk > 300) $("#top").fadeIn(500);\r\n          else { $("#top").fadeOut(500); }\r\n      });\r\n  <\/script>\r\n<\/pre>\nYukar\u0131daki JQuery kodu sayesinde “Yukar\u0131 \u00c7\u0131k” butonumuzun i\u015flevselli\u011fini ayarlam\u0131\u015f bulunmaktay\u0131z.
\n\u015eimdide “Yukar\u0131 \u00c7\u0131k” butonumuzun g\u00f6rsel tasar\u0131m\u0131n\u0131 CSS ile ayarlayal\u0131m.<\/p>\n
\r\n        #top {\r\n            bottom: 5px;\r\n            bottom: 20px;\r\n            display: none;\r\n            height: 100px;\r\n            position: fixed;\r\n            right: 20px;\r\n        }\r\n<\/pre>\nSon olarakta butonumuzun HTML kodlar\u0131n\u0131 yazal\u0131m.<\/p>\n
\r\n    <div id="top">\r\n        Yukar\u0131 \u00c7\u0131k<br \/>\r\n        <img width="50" height="50" src="yukaricik.png" \/>\r\n    <\/div>\r\n<\/pre>\nEvet i\u015flemimiz bu kadar.Bu i\u015flemlerin derlenmi\u015f halini a\u015fa\u011f\u0131da yay\u0131nlamakta fayda var.<\/p>\n
\r\n<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n    <script src="http:\/\/code.jquery.com\/jquery-1.11.1.min.js"><\/script>\r\n    <script type="text\/javascript">\r\n        $(function () {\r\n            $("#top").click(function () {\r\n                \/\/ Sayfam\u0131z\u0131 kayd\u0131racak olan kod buras\u0131d\u0131r.\r\n                $("html,body").stop().animate({ scrollTop: "0" }, 1000);\r\n            });\r\n        });\r\n        $(window).scroll(function () {\r\n            var uzunluk = $(document).scrollTop();\r\n            if (uzunluk > 300) $("#top").fadeIn(500);\r\n            else { $("#top").fadeOut(500); }\r\n        });\r\n    <\/script>\r\n    <style type="text\/css">\r\n        #top {\r\n            bottom: 5px;\r\n            bottom: 20px;\r\n            display: none;\r\n            height: 100px;\r\n            position: fixed;\r\n            right: 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div id="top">\r\n        Yukar\u0131 \u00c7\u0131k<br \/>\r\n        <img width="50" height="50" src="yukaricik.png" \/>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYapt\u0131\u011f\u0131m\u0131z bu uygulamay\u0131 buradan<\/a> \u00e7al\u0131\u015f\u0131r bir vaziyette inceleyebilirsiniz.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bir web sitesine Scrollbar a\u015fa\u011f\u0131ya do\u011fru kayd\u0131k\u00e7a sitenin \u00fcst k\u0131s\u0131mlar\u0131na d\u00f6nmeyi kolayla\u015ft\u0131racak “Yukar\u0131 \u00c7\u0131k” butonu koymak iyi fikir gibi geliyor.Hem sitenin \u00fcst k\u0131s\u0131mlar\u0131n\u0131 kullan\u0131c\u0131ya hat\u0131rlatacakt\u0131r hem de g\u00f6r\u00fcnmeyen \u00fcst k\u0131s\u0131mlarda slayt vs. gibi de\u011fi\u015fken...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[593,265,748,594,592],"class_list":["post-2639","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-buton","tag-javascript-2","tag-jquery","tag-scrollbar","tag-yukari-cik"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2639","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2639"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2639\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}