જયેશ સુતરીયા વેબ બ્લૉગ : Scroll To Top code

flag

❆*_PARIKSHA PE CHARCHA MARCH_2024..._Celebrate Indi@_ *❆

_ભાષા અધ્યયન નિષ્પત્તિઓ (ક્ષમતાઓ) ધોરણ ૬ થી ૮_

_ધોરણ ૬ થી ૮ કવિતાઓ _

_ વાર્ષિક તેમજ માસિક પાઠ આયોજન અને નિબંધ આયોજન _

_PRAISA સોફટવેરને લગતી મહત્વની માહિતી _

_ભાષા ટેક્સ બુક ધોરણ ૬ થી ૮_

_વિદ્યાસહાયક પુરા પગાર / ઉચ્ચતર પગાર દરખાસ્ત _

_ સર્વગ્રાહી મૂલ્યાંકન સોફ્ટવેર _

_બિટ કેળવણી નિરીક્ષકની પરીક્ષા ઉપયોગી માહિતી _

_શાળા ઉપયોગી એક્સલ સોફ્ટવેર _

_ "The Beauty Of the Work Depends Upon the Way, We meet it_ _

"આ બ્લોગને વ્યવસ્થિત જોવા માટે આપણા કમ્પ્યુટર-લેપટોપમાં Bhuj Unicode,Bhavnagar Unicode આ પ્રમાણેના ફોન્ટ હોવા જરૂરી છે જે આપને સોફ્ટવેર મેનુના સબ મેનુમાં કોમ્પ્યુટર ફોન્ટ મેનુ માંથી મળશે જે ઇન્સ્ટોલ કરી રિસ્ટાર્ટ કરી બ્લોગ સારી રીતે જોઇ શકશો" - "ભાષાશિક્ષણના મારા આ બ્લોગમાં આપ સૌનું હાર્દિક સ્વાગત છે. આ બ્લોગ ભાષા શિક્ષણ કાર્યમાં આપ સૌને ઉપયોગી થશે તેવી આશા છે. ._મારા આ બ્લોગમા શિક્ષણને લગતી કોઈપણ માહિતી કે ઉપયોગી ફાઈલ શેર કરવા ઇચ્છતા હો તો અહીં આપેલ google ફોર્મ પર માહિતી અપલોડ કરી શકો છો ,_ _તો આ બ્લોગની અવાર- નવાર મુલાકાત લેતા રહેશો અને આ બ્લોગ વિશેના આપના અભિપ્રાયો તથા સૂચનો આવકાર્ય છે. આભાર સહ..."

જો શિક્ષક દોડશે તો બાળક ચાલવાની શરૂઆત કરશે, શિક્ષક ચાલશે તો બાળક ઊભો રહી જશે, શિક્ષક ઊભો રહી જશે તો બાળક નીચે બેસી જશે, શિક્ષક બેસી જશે તો બાળક સૂઈ જશે, શિક્ષક સૂઈ જશે તો બાળક મુરજાય જશે , માટે શિક્ષકે સતત પ્રયત્ન - પ્રવૃત્તિશીલ રહેવું જ પડશે.-બર્નાર્ડ રૂસેલ _

_ THANKS _FOR _VISIT _

Monday, 1 June 2020

Scroll To Top code

❀ 👉 અહીં બ્લોગ કે વેબસાઈટ માં scroll to top button મૂકવા માટેના ઉપયોગી કોડ મુકવામાં આવેલ છે. ...

❆ Scroll To Top Button code Below ❆

❆ ➯ Blog Fast Scroll To Top Button code click here


 ➮ Type Below  code to HTML/Javascript Gadget
<style>
body {
  font-family: Arial, bhuj unicode, sans-serif;
  font-size: 13px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 100px;
}

#myBtn:hover {
  background-color: red;
}
</style>

<button onclick="topFunction()" id="myBtn" title="CEO-J.P.Sutariya">Top</button>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

❆ ➯ Blog Slow Scroll To Top Button code click here


        ➮ Type Below  code to HTML/Javascript Gadget

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://www.animatedimages.org/data/media/466/animated-thank-you-image-0041.gif" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"J.P.Sutariya"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script>
<noscript>Not seeing a <a href="https://www.scrolltotop.com/">J.p.sutariya</a>? Go to our FAQ page for more info.</noscript>

❆ ➯ Direct Fast to scroll to top code click here


        ➮ Type Below  code to HTML/Javascript Gadget

<style>
body {
  font-family: Arial, bhuj unicode, sans-serif;
  font-size: 13px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 100px;
}

#myBtn:hover {
  background-color: red;
}
</style>



<button onclick="topFunction()" id="myBtn" title="CEO-J.P.Sutariya">Top</button>




<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

❆ ➯ Slow bottom to top scroll code click here


        ➮ Type Below  code to HTML/Javascript Gadget

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://www.animatedimages.org/data/media/466/animated-thank-you-image-0041.gif" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"sosiya kanya shala"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script>
<noscript>Not seeing a <a href="https://www.scrolltotop.com/">sosiya kanya shala</a>? Go to our FAQ page for more info.</noscript>

❆ ➯ Right side Custome Scroller code click here



<style>
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: yellow; 
  border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: green; 
}
</style>


➯  Type this code in Blog code head close tag Above

❆ ➯ More...



 code type here 


❆ ➯ This section is working mode ...

Follow @jpsutariya1

Press Note :-

❆ ➯ આ બ્લોગ વાંચનાર તમામ વાચક મિત્રોનું હાર્દિક સ્વાગત છે, કોઈપણનો કોપીરાઇટનો ભંગ થતો હોય તો ધ્યાન દોરવું. ❆

❆ આ બ્લોગ નિરંતર આપની મદદ માટે તત્પર રહે એવી અભ્યર્થના ❆

___❆ ➯ આ બ્લોગમાં શિક્ષણને રસપ્રદ બનાવી શકાય તે માટે જરૂરી માહિતી અને સંદર્ભ સાહિત્ય મુકવામાં આવશે. ❆ ___

main dropdown menu

flag

Latest Notification

Monday, 1 June 2020

Scroll To Top code

Press Note :-

visitors

Online this Times

Search here