saeed450

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

5 پست در این موضوع قرار دارد

سلام . افزونه scroll back to top رو نصب کردم . اما چرا دکمه ای به سایتم اضافه نشده برای بازگشت به بالای صفحه ؟!

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

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

1

به اشتراک گذاری این پست


لینک به پست
در 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;

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

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

حالا به فایل 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;
}

 

1

به اشتراک گذاری این پست


لینک به پست
در در 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;
}

 

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری