SHOW:
|
|
- or go back to the newest paste.
| 1 | - | বন্ধুরা আপনারা সকলে কেমন আছেন, নিশ্চই অনেক ভাল। আজকে আমি jQuery function scroll Top |
| 1 | + | বন্ধুরা আপনারা সকলে কেমন আছেন, নিশ্চই অনেক ভাল। আজকে আমি jQuery function scroll Top কি ভাবে আপনার ওয়েবপেজ এ সঞ্জুক্ত করবেন তা শেয়ার করব । |
| 2 | প্রথমে আপনার সাইট এর index.html এ জান তারপর body -র টেগটি যেখানে শেষ হয়েছে ঠিক তার উপরে আপনি jQuery লিংক করূন। আপনি jQuery দুই ভাবে লিংক | |
| 3 | করতে পারেন...১/সরাসরি CDN থেকে অথবা | |
| 4 | ২/ ডউনলোড করে লোকাল সারভার থেকে । | |
| 5 | প্রথমে আপনার ফলডারে একটি ফাইল খুলুন, যেমন main.js নামে একটি ফাইল নিলাম এবং নোটপ্লাস প্লাস এ রান করলাম । এবার একই ভাবে index.html এবং style.css রান করি । এরপর | |
| 6 | index.html যে ডিভ এ scroll Top তৈরি করব সেখানে একটি button ট্যাগ নিয়া একটি id তৈরি করি । যেমনঃ | |
| 7 | <button type="button" id="backtotop"><i class="fa fa-chevron-up"></i></button> | |
| 8 | এর পর style.css এ কাজ করলাম এভাবে | |
| 9 | button#backtotop{
| |
| 10 | border: 0px solid #ddd; | |
| 11 | background: #333; | |
| 12 | padding: 0px; | |
| 13 | width: 50px; | |
| 14 | height: 50px; | |
| 15 | line-height: 50px; | |
| 16 | color: #fff; | |
| 17 | font-size: 20px; | |
| 18 | cursor: pointer; | |
| 19 | box-shadow: 2px 2px 0px 0px #000; | |
| 20 | -webkit-transition: all 0.5s; | |
| 21 | transition: all 0.5s; | |
| 22 | position: fixed; | |
| 23 | left: 50px; | |
| 24 | bottom: -60px; | |
| 25 | opacity: 0; | |
| 26 | visibility: hidden; | |
| 27 | z-index: 99; | |
| 28 | } | |
| 29 | button#backtotop.fixed{
| |
| 30 | opacity: 1; | |
| 31 | visibility: visible; | |
| 32 | bottom: 0; | |
| 33 | } | |
| 34 | button#backtotop:focus{
| |
| 35 | outline: 0; | |
| 36 | box-shadow: 3px 3px 0px 0px red; | |
| 37 | } | |
| 38 | button#backtotop:hover{
| |
| 39 | box-shadow: 3px 3px 0px 0px red; | |
| 40 | } | |
| 41 | এবং main.js এ কাজ করলাম এভাবে...... | |
| 42 | ||
| 43 | // jQuery Scroll to Top | |
| 44 | ||
| 45 | jQuery(document).ready(function() {
| |
| 46 | jQuery(window).scroll(function(){
| |
| 47 | if(jQuery(this).scrollTop() > 200){
| |
| 48 | jQuery('button#backtotop').addClass('fixed');
| |
| 49 | }else{
| |
| 50 | jQuery('button#backtotop').removeClass('fixed');
| |
| 51 | } | |
| 52 | }); | |
| 53 | jQuery('button#backtotop').click(function(){
| |
| 54 | jQuery('html body').animate({scrollTop:0},1000);
| |
| 55 | }); | |
| 56 | }); | |
| 57 | ||
| 58 | হয়ে গেল আমার scroll Top . |
