طريقة النزول الى جزء معين من الصفحة عند الضغط على زر ما

بكل بساطة تضع زر وتحدد العنوان href كاسم للعنصر المراد الانتقال اليه

<h1><a href="#target">Target Text Title</a></h1>

<p id="target">Target Text</p>

يمكنك فعل ذلك من خلال استخدام jquery, لنحاول شرح ذلك بالكود, بداية لدينا هذا الكود الخاص ب html

    <div>
        <a href="#" id="botton">أنقر للنزول الى الأسفل</a>
    </div>
    <div>
        <a href="#" id="top">أنقر للصعود الى اعلى</a>
    </div>

كما تلاحظ لدينا هذا الكود, سوف نقوم باعطاء تنسيقات بسيطة لعنصر div مثل الارتفاع كالتالي

        div {
            height: 1000px;
        }

ارتفاع عنصر div هو 1000 بكسل لكي تظهر النتيجة بشكل جيد, ثم يمكننا استخدام الخاصية animate لكي يتحرك الموقع بشكل جيمل كالتالي,

             $('#botton').click(function () {
                $('html,body').animate({
                    scrollTop: $('#top').offset().top
                }, 1000);
            });

            $('#top').click(function () {
                $('html,body').animate({
                    scrollTop: $('#botton').offset().top
                }, 1000);
            }); 

قمنا هنا باستخدام jquery, بداية قمت بتحديد العنصر الذي ليده المعرف botton ومن ثم أضفت له خاصية click , اي عند الضغط عليه اجعل العنصرين html و body يتحركان وذلك باستخدام الخاصية animate, الخاصية animate تأخذ معاملين, المعامل الأول نريد تحديد الى أين تتحرك الصفحة وهناك عدة طرق لتحديد هذا المعامل, من ضمنها استخدام الخاصية scrollTop والتي تحدد مكان العنصر , وكما تلاحظ قمنا بتحديد العنصر الذي نريد التحرك اليه وهو العنصر الذي لديه المعرف top, أما المعامل الثاني فهي سرعة حكرة الصفحة وهي بال ms أي كل 1000 ms تساوي 1s , تستطيع تحديد المدة التي تريد. 
هناك طريقة أخرى دون استخدام jquery وهي باستخدام الخاصية href فقط مع اعطاء العنصرين html و body بعض التنسيقات, لاحظ كود html

    <div>
        <a href="#top" id="botton">أنقر للنزول الى الأسفل</a>
           ^^^^^^^^^^^
    </div>
    <div>
        <a href="#botton" id="top">أنقر للصعود الى اعلى</a>
           ^^^^^^^^^^^^^^
    </div>

كما تلاحظ في الخاصية href كتبت اسم المعرف الخاص بالعنصر الآخر, الآن مثلا لو ضغطت على جملة " أنقر للنزول الى الأسفل " فسوف يذهب للعنصر الذي ليده المعرف top, بقي لدينا أن نحدد خاصية scroll-behavior للصفحة كالتالي

        html,body{
            scroll-behavior: smooth;
        }

تجعل هذه الخاصية حركة الصفحة جميلة وسلسة