رفتن به مطلب

مشکل با افزونه scroll back to top


پست های پیشنهاد شده

سلام

از کدی که داخل صفحه زیر معرفی شده استفاده کنید ساده تره

https://codyhouse.co/gem/back-to-top/

لینک به ارسال
در 7 ساعت قبل، SM-Mahdavi گفته است :

سلام

از کدی که داخل صفحه زیر معرفی شده استفاده کنید ساده تره

https://codyhouse.co/gem/back-to-top/


<body>
	<!-- all your content here -->
 
	<a href="#0" class="cd-top">Top</a>
 
	<!-- link to scripts here -->
</body>
cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_opacity = 1200,
	//duration of the top scrolling animation (in ms)
	scroll_top_duration = 700;

خب هر کدوم از این کدا رو باید تو کدوم قسمت پوسته بزارم ؟!

لینک به ارسال

سلام

اول از همه یه کپی از قالبتون بگیرید تا داشته باشین و در صورت بروز مشکل اونو قرار بدین ..

حالا به فایل header.php رفته و کد head/ رو پیدا کنین

</head>

قبل از این ، این کد رو قرار بدین :

<script type="text/javascript">
	$(function(){
		$("#goarrowtopsite").click(function(){
			$('body,html').animate({scrollTop:0},800);
		});
	});
	$(window).scroll(function(){
		if($(this).scrollTop()>50){
			$("#goarrowtopsite").fadeIn(150);
		}else{
			$("#goarrowtopsite").fadeOut(150);
		}
	});
</script>

حالا بعد از کد body :

<body>

این کد رو قرار بدین :

<div id="goarrowtopsite"></div>

و داخل فایل استایلهاتون ، یعنی فایل style.css تو یک خط جدید ، این کدهای استایل رو قرار بدین :

#goarrowtopsite {
	background: #ed485c;
	border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	bottom: 10px;
	color: #fff;
	cursor: pointer;
	display: none;
	font-size: 1.3em;
	height: 50px;
	position: fixed;
	right: 10px;
	width: 50px;
	z-index: 100;
}
#goarrowtopsite:before {
	border-bottom: 6px solid #fff;
	border-left: 7px solid rgba(0, 0, 0, 0);
	border-right: 7px solid rgba(0, 0, 0, 0);
	content: " ";
	left: 18px;
	position: absolute;
	top: 21px;
}
#goarrowtopsite:hover {
	background: #fd586c;
}

 

لینک به ارسال
در در 10/13/2016 at 01:47، alitna گفته است :

سلام

اول از همه یه کپی از قالبتون بگیرید تا داشته باشین و در صورت بروز مشکل اونو قرار بدین ..

حالا به فایل header.php رفته و کد head/ رو پیدا کنین


</head>

قبل از این ، این کد رو قرار بدین :


<script type="text/javascript">
	$(function(){
		$("#goarrowtopsite").click(function(){
			$('body,html').animate({scrollTop:0},800);
		});
	});
	$(window).scroll(function(){
		if($(this).scrollTop()>50){
			$("#goarrowtopsite").fadeIn(150);
		}else{
			$("#goarrowtopsite").fadeOut(150);
		}
	});
</script>

حالا بعد از کد body :


<body>

این کد رو قرار بدین :


<div id="goarrowtopsite"></div>

و داخل فایل استایلهاتون ، یعنی فایل style.css تو یک خط جدید ، این کدهای استایل رو قرار بدین :


#goarrowtopsite {
	background: #ed485c;
	border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	bottom: 10px;
	color: #fff;
	cursor: pointer;
	display: none;
	font-size: 1.3em;
	height: 50px;
	position: fixed;
	right: 10px;
	width: 50px;
	z-index: 100;
}
#goarrowtopsite:before {
	border-bottom: 6px solid #fff;
	border-left: 7px solid rgba(0, 0, 0, 0);
	border-right: 7px solid rgba(0, 0, 0, 0);
	content: " ";
	left: 18px;
	position: absolute;
	top: 21px;
}
#goarrowtopsite:hover {
	background: #fd586c;
}

 

ممنون از توضیح جامع و کامل شما

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...