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

Simoh · 5 أكتوبر 2015

لديّ حقل نص في صفحة 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، فكيف أفعل ذلك؟

E.Nourddine · 5 أكتوبر 2015

اليك سيناريو الكود البرمجي، بعد الضغط على الزر سيتم نقل موضع الصفحة من موضعها الحالي إلى موضع حقل النص عن طريق 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>

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

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

السؤال

Simoh

رابط هذا التعليق

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

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية