• 0

كيف أضيف خاصية Scroll إلى عنصر معين بـ Jquery؟

لديّ حقل نص في صفحة html:

<input type="text" class="textfield" value="" id="subject" name="subject">

وهذا الزر أيضًا:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

وأريد عند الضغط على الزر أن تنتقل الصفحة إلى الحقل عن طريق Scroll بـ Jquery، فكيف أفعل ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

اليك سيناريو الكود البرمجي، بعد الضغط على الزر سيتم نقل موضع الصفحة من موضعها الحالي إلى موضع حقل النص عن طريق Scroll و دالة animate ليبدو العملية حركية:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

كما يتوجب عليك إضافة مكتبة Jquery  إلى ملف html، هذا مثال كامل مجرب:

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#div1").offset().top
                    }, 2000);
                //});
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

 كما يمكنك الاستفادة من الأمثلة الموجودة في الرابط

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن