কিভাবে Add করবেন Back to Top Button With Smooth Scrolling ? ~ Solutions Bangla

আস্সালামুআলাইুম...
হ্যালো বন্ধুরা !

আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি বিষয় নিয়ে হাজির হলাম কিভাবে আপনারা Add করবেন Back to Top Button With Smooth Scrolling.

ব্লগারে শীর্ষে ফিরে আসুন - সম্ভবত এটিতে টিউটোরিয়াল সম্পর্কে ইন্টারনেটে অনেকগুলি স্প্ল্যাটার রয়েছে যা কীভাবে ব্লগটিতে শীর্ষে কী কী ইনস্টল করবেন এবং এই সময়ে আমি টিউটোরিয়াল সম্পর্কে টিপস ভাগ করব।

নিজেই উপরে ফিরে আসা বোতামটির ভূমিকা এবং কার্যকারিতাটি বেশ গুরুত্বপূর্ণ যা দর্শনার্থীদের পক্ষে কেবল একটি বোতামে ক্লিক করে মেনজস্ক্রোল পৃষ্ঠার শীর্ষে যেতে চায়। দ্রষ্টব্য: কোনও বিদ্যমান টেমপ্লেট যদি উপরে বোতামে ফিরে আসে তবে দয়া করে প্রথমে এটি সরান।

এখানে কীভাবে ইনস্টলেশন করবেন:

1 - Login to Blogger Dashboard> select blogs> select Templates> then click the Edit HTML, save the following code after the <head> or before </ head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

যদি ইতিমধ্যে আপনার টেম্পলেটে ফন্টউইউজ যুক্ত হয় তবে এটিকে উপেক্ষা করুন।

2 - আগে সিএসএস সংরক্ষণ করুন ]]></b:skin> or </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3 - নীচের JQuery এবং এইচটিএমএল আগে সংরক্ষণ করুন </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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

4 - এর পরে টেমপ্লেটটি সংরক্ষণ করুন এবং ফলাফল দেখুন।

টিউনারঃ Sadikur Rahman

আপনার জন্য আরও ভয়েস

Ads By Sadik14367