ব্লগার ব্লগে যুক্ত করুন " উপরে ফিরুন " ( Back to Top ) বাটন সঙ্গে বাউন্স ইফেক্ট !!

আমারা সবাই যানি এই উপরে ফিরুন বা back to Top বাটন এর কাজ কি নাম শুনেই বুঝতে পারছেন এটা সাধারনত ব্লগ বা ওয়েবসাইটে ব্যবহার করা হয় সুধু মাত্র ব্লগা ভিজিটর দের জন্য কারন এটা দ্বারা যেনে ভিজিট খুব সহজে নিচে থেকে উপরে ফিরতে পারে মূলত এটার কাজ এই টুকুই এর বেশি নয় । যাই হোক এই Back to top বাটন নিয়ে আমি এর আগেও কয়েকটা পোস্ট করেছি কিন্তু সেগুলছি খুব সাধারন সঙ্গে ব্যবহার করা হয়েছিল ফটো কিন্তু আজকে যেটা আপনাদের সঙ্গে শেয়ার করবো তাতে আছে একটা নতুন ইফেক্ট বাউন্স এটার মানে যখুন এই বাটনে ক্লিক করবে তখুন উপরে যাওয়ার পর একটা বাউন্স করবে নিচে ডেমো দেখলেই বুঝতে পারবেন এবং এটাতে কোন রকম ফটো ব্যবহার করা হয়নি ব্যবহার করা হয়েছে লেটেস্ট font awesome ইকন তাহলে চলুন দেওয়া নেওয়া যাক এই বাটন এর ডেমো ও কিভাবে ব্যবহার করবেন তার প্রক্রিয়া ।

Button Demo

উপর থেকে লাইভ ডেমো দেখেনিন আশাকরি আপনাদের ডেমো দেখা শেষ এবং আপনাদের বাটন টি পছন্দ হয়েছে তাহলে চলুন দেখে নেওয়া যাক কিভাবে এই বাটন আপনার ব্লগার ব্লগে যুক্ত করে ব্যবহার করবেন । খুব সহজ সাধারন কিছু স্টেপ পার করলেই হয়ে যাবে ।

উপরে ফিরুন ( Back to Top ) বাটন কিভাবে যুক্ত করবেন

• প্রথমে আপনি ব্লগার অ্যাকাউন্ট লগইন করুন

• ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন

• এবার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগ সার্চ করুন

 </head>

• এবার উপরের ট্যাগ এর ঠিক উপরে নিচের কোড টুকু কপি পেস্ট করুন

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

• এবার একি ভাবে নিচের ট্যাগটি সার্চ করুন এবং খুজে বের করুন

 ]]></b:skin>

• উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি পেস্ট করুন

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#000000;
    color:#fff;
    width:45px;
    height:54px;
    line-height:44px;
    right:25px;
    bottom:-30px;
    padding-top:2px;
    border-radius:7px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.3s;
}
.smoothscroll-top:hover {
    background-color:#006699;
    color:#fff;
    transition:all 0.3s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:2;
    bottom:35px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

• এবার আপনি একি ভাবে নিচের ট্যাগটি সার্চ করুন

 </body>

• উপরের ট্যাগটি খুজে পেলে তার ঠিক উপরে নিচের কোড গুল কপি পেস্ট করুন 

স্টাইল - ১ বাউন্স ইফেক্ট ছাড়া

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

স্টাইল - ২ বাউন্স ইফেক্ট যুক্ত

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

এবার Save Template এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগ ভিজিট করে চেক করুন আশাকরি আপনি কাজটি করতে সফল হয়েছেন । তাহলে পোস্টটি থেকে বুঝতে কোন রকম সমস্যা হলে নিচে কমেন্ট করুন ।

তাহলে আজকের মত এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে আর আজকের এই পোস্ট এবং বাটন ভাল লাগলে অবশ্যই নিচে কমেন্ট করুন ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করতে ভুলবেন না । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

Md. Habibullah(Habib)

নতুন কিছু শিখতে অনেক চেষ্টা করি। নিজে যা জানি তা অন্যকে জানাতে ভালোবাসি। Good Habit for perfect life.

Share this post