تمت الإجابة مساعده . خطأ فى كود إنشاء زر صعود لصفحة html

تم تحميل الصفحة في 0,2861357 ثانية
مساعده . خطأ فى كود إنشاء زر صعود لصفحة html
الحالة
مغلق و غير مفتوح للمزيد من الردود.

AhmedA3sar

Beginner Developer
rank
إنضم
9 فبراير 2018
المشاركات
146
الإعجابات
127
النقاط
43
السلام عليكم ورحمة الله وبركاته ..
أعضاء المنتدي الكرام ..
تواجهنى مشكلة في كود لأنشاء زر صعود لصفحة html
تابعت احد الفيدوهات على اليوتيوب وقمت بكتابه الكود ولكن لا يتم تطبيق المراد من الكود وحاولت اكتر من مرة التغيير في بعض الاشياء داخل الكود ولكن دون فائدة
لااعرف أن الخطأ بالتحديد
اتمنى المساعدة في اكتشاف مكان الخطأ بداخل الكود واصلاحة
صورة للرز المراد انشائه وفكره عمله


فكرة عمل الزر : أن لما يكون ال scroll اللي في الجنب بتاع التمرير من اعلى لاسفل .... لما يكون في اعلى الصفحة المفترض أن الزر المشار ليه بالسهم الاسود يختفى ولما انزل بالـ scroll لمنتصف الصفحة تقريبا يبدأ الزر المشار ليه بالسهم الاسود ده يظهر تاني
وعندما أضغط على الزر اللي مشار جمبه بالسهم الأسود الصفحة تطلع لفوق تاني لأعلى الصفحة يعني .. اتمنى أن يكون عرفت اشرح اللي انا عايزه

وده الكود المستخدم كامل ..
HTML:
<!DOCTYPE html>
<html>
<head>
<title>button up</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'/>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
body{
height: 500%;
}
#button-up{
position:fixed;
bottom: 50px;
right: 10px;
background-color:rgba(200, 200, 200, 0.7);
cursor:pointer;
border: 1px solid #000;
border-radius:50%;
height: 50px;
width: 50px;
}
#button-up:hover{
background-color:rgba(200, 200, 200, 0.1);
}
#button-up i{
font-size: 30px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);

}
</style>
</head>
<body>
<div id='button-up'><i class='fa fa-arrow-up'></i></div>

<script type="text/javascript">
var upButton = document.getElementById('button-up'),
s;
distanse;
function buttonHide(){
if(document.body.scrollTop >= 150){
upButton.style.display= 'block';
}else{
upButton.style.display= 'none';
}
}
window.onload = buttonHide;
window.onscroll = buttonHide;
upButton.onclick = function(){
distanse = document.body.scrollTop;
goup();
}
function goup(){
document.body.scrollTop -= distanse / 100;
s = setTimeout(goup, 10);
if (document.body.scrollTop == 0){
clearTimeout(s);
}
}
</script>
</body>
</html>
المشكلة بقى أن الزر مش بيختفى لما يكون ال scroll بالاعلى وكمان لما بضغط عليه وانا في اسفل الصفحة مش بيطلعنى بالصفحة لفوق تاني ..
الجزء ده من الكود مسؤل عن اخفاء الزر لما يكون الاسكرول بالاعلى

HTML:
if(document.body.scrollTop >= 150){

upButton.style.display= 'block';

}else{

upButton.style.display= 'none';

}

}
اتمنى ايجاد حل للخطأ ولو مش ممنوع أنى اضيف الفيديو الخاص بالشرح اللي انا مشيت عليه هضيفه
تحياتى للجميع وشكرا لكم
 

bichou

Beginner Developer
rank
إنضم
18 أكتوبر 2016
المشاركات
60
الإعجابات
15
النقاط
8
الإقامة
dz
السلام عليكم ورحمة الله وبركاته ..
أعضاء المنتدي الكرام ..
تواجهنى مشكلة في كود لأنشاء زر صعود لصفحة html
تابعت احد الفيدوهات على اليوتيوب وقمت بكتابه الكود ولكن لا يتم تطبيق المراد من الكود وحاولت اكتر من مرة التغيير في بعض الاشياء داخل الكود ولكن دون فائدة
لااعرف أن الخطأ بالتحديد
اتمنى المساعدة في اكتشاف مكان الخطأ بداخل الكود واصلاحة
صورة للرز المراد انشائه وفكره عمله


فكرة عمل الزر : أن لما يكون ال scroll اللي في الجنب بتاع التمرير من اعلى لاسفل .... لما يكون في اعلى الصفحة المفترض أن الزر المشار ليه بالسهم الاسود يختفى ولما انزل بالـ scroll لمنتصف الصفحة تقريبا يبدأ الزر المشار ليه بالسهم الاسود ده يظهر تاني
وعندما أضغط على الزر اللي مشار جمبه بالسهم الأسود الصفحة تطلع لفوق تاني لأعلى الصفحة يعني .. اتمنى أن يكون عرفت اشرح اللي انا عايزه
وده الكود المستخدم كامل ..

HTML:
<!DOCTYPE html>
<html>
<head>
<title>button up</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'/>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
body{
height: 500%;
}
#button-up{
position:fixed;
bottom: 50px;
right: 10px;
background-color:rgba(200, 200, 200, 0.7);
cursor:pointer;
border: 1px solid #000;
border-radius:50%;
height: 50px;
width: 50px;
}
#button-up:hover{
background-color:rgba(200, 200, 200, 0.1);
}
#button-up i{
font-size: 30px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);

}
</style>
</head>
<body>
<div id='button-up'><i class='fa fa-arrow-up'></i></div>

<script type="text/javascript">
var upButton = document.getElementById('button-up'),
s;
distanse;
function buttonHide(){
if(document.body.scrollTop >= 150){
upButton.style.display= 'block';
}else{
upButton.style.display= 'none';
}
}
window.onload = buttonHide;
window.onscroll = buttonHide;
upButton.onclick = function(){
distanse = document.body.scrollTop;
goup();
}
function goup(){
document.body.scrollTop -= distanse / 100;
s = setTimeout(goup, 10);
if (document.body.scrollTop == 0){
clearTimeout(s);
}
}
</script>
</body>
</html>
المشكلة بقى أن الزر مش بيختفى لما يكون ال scroll بالاعلى وكمان لما بضغط عليه وانا في اسفل الصفحة مش بيطلعنى بالصفحة لفوق تاني ..
الجزء ده من الكود مسؤل عن اخفاء الزر لما يكون الاسكرول بالاعلى

HTML:
if(document.body.scrollTop >= 150){

upButton.style.display= 'block';

}else{

upButton.style.display= 'none';

}

}
اتمنى ايجاد حل للخطأ ولو مش ممنوع أنى اضيف الفيديو الخاص بالشرح اللي انا مشيت عليه هضيفه
تحياتى للجميع وشكرا لكم
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل