https://www.ozdilek.com.tr/js/dwsee.top.bottom.menu.js

1(function ($) {
2	$.fn.dwseeTopBottomMenu = function (options) {
3
4		//setting
5		var settings = $.extend({
6				'menucontainer': '.TopBottomMenu',
7				'boxsize': 40,
8				'boxbackground': '#ffffff',
9				'position': 'right',
10				'openmenusize': 500,
11				'topicon': 'images/up_arrow.png',
12				'menuicon': 'images/menu_icon.png',
13				'bottomicon': 'images/down_arrow.png'
14
15			}, options);
16
17		$('body')
18		.prepend('<div id="top-bottom-menu"><div id="dstbm-top"></div><div id="dstbm-menu"> <div id="dstbmmenu"></div></div><div id="dstbm-bottom"></div></div>')
19
20		$(settings.menucontainer)
21		.clone()
22		.appendTo('#dstbmmenu')
23		$(settings.menucontainer)
24		.hide()
25
26		$("#dstbmmenu > " + settings.menucontainer)
27		.css("display", "block")
28
29		$("#top-bottom-menu")
30		.css("height", settings.boxsize + "px")
31		.css("bottom", (settings.boxsize * 2) + 10 + "px")
32		.css("line-height", settings.boxsize + "px")
33		.css(settings.position, "10px");
34		$("#top-bottom-menu #dstbm-top")
35		.css("height", settings.boxsize + "px")
36		.css("width", settings.boxsize + "px")
37		.css(settings.position, "0")
38		.css("background", "url('" + settings.topicon + "') center center no-repeat")
39		.css("background-color", settings.boxbackground);
40		$("#top-bottom-menu #dstbm-bottom")
41		.css("height", settings.boxsize + "px")
42		.css("width", settings.boxsize + "px")
43		.css(settings.position, "0")
44		.css("top", (settings.boxsize * 2) + 2 + "px")
45		.css("background", "url('" + settings.bottomicon + "') center center no-repeat")
46		.css("background-color", settings.boxbackground);
47		$("#top-bottom-menu #dstbm-menu")
48		.css("height", settings.boxsize + "px")
49		.css("width", settings.boxsize + "px")
50		.css(settings.position, "0")
51		.css("top", (settings.boxsize + 1) + "px")
52		.css("background", "url('" + settings.menuicon + "') center center no-repeat")
53		.css("background-color", settings.boxbackground);
54
55		$(window)
56		.scroll(function () {
57			var pos = ($(window).height() / 2);
58
59			if ($(window)
60				.scrollTop() > 200) {
61				$("#dstbm-top")
62				.fadeIn("slow");
63			} else {
64				$("#dstbm-top")
65				.fadeOut("slow");
66			};
67
68			if (($(window)
69					.height() + $(window)
70					.scrollTop()) >= $(document)
71				.height()) {
72				$("#dstbm-bottom")
73				.fadeOut("slow");
74			} else {
75				$("#dstbm-bottom")
76				.fadeIn("slow");
77			}
78
79		});
80
81		$("#dstbm-top")
82		.click(function () {
83			$('html, body')
84			.animate({
85				scrollTop: '0'
86			});
87		})
88
89		$("#dstbm-bottom")
90		.click(function () {
91			$('html, body')
92			.animate({
93				scrollTop: $("body")
94				.height()
95			});
96		})
97
98		$("#dstbm-menu")
99		.click(function () {
100	
101		console.log(($(this).width() + " == " + settings.boxsize))
102		
103			if ($(this).width() == (settings.boxsize-2)) {
104				$("#dstbm-menu #dstbmmenu")
105				.css("display", "block");
106				$("#dstbm-menu")
107				.css("background", settings.boxbackground + " url('') center center no-repeat")
108				.css("cursor", "default")
109
110				$(this)
111				.animate({
112					width: settings.openmenusize + "px"
113				});
114			}
115
116		})
117
118		$("#dstbm-menu")
119		.hover(function () {},
120
121			function () {
122				
123			
124			if ($(this)
125				.width() == (settings.openmenusize-2)) {
126				$("#dstbm-menu #dstbmmenu")
127				.css("display", "block")
128				$("#dstbm-menu")
129				.css("background", settings.boxbackground + " url('') center center no-repeat")
130				.css("cursor", "pointer")
131
132				$(this)
133				.animate({
134					width: settings.boxsize + "px"
135				}, function () {
136					$("#dstbm-menu #dstbmmenu")
137					.css("display", "none")
138					$("#dstbm-menu")
139					.css("background", settings.boxbackground + " url('" + settings.menuicon + "') center center no-repeat")
140				});
141			}
142
143		})
144
145	};
146
147})(jQuery);