jQuery Girl
  1. jQuery Girl
  3. Comment faire défiler jusqu’au milieu (50%) de la page
Intereting Posts
Comment puis-je exclure $ (this) d’un sélecteur jQuery? jquery datepicker ajout d’un événement au bouton suivant et précédent comment appeler la fonction jQuery appel dans asp.net c #? Compter les boutons radio cochés avec jQuery jQuery dans le widget Problème avec JQuery pour un menu déroulant à plusieurs niveaux Comprendre le jqXHR de jQuery d3js aster plot label affiche comme arc jQuery .data () vs performances de données-XXX HTML5 jQuery Mobile Scrollview Événement à déclencher lorsque vous quittez le site Web ou ferme le navigateur Obtenir un élément parent pour un sélecteur jQuery html2canvas javascript screenshot et upload fancybox non attachée aux liens après un appel ajax l’en-tête fixe défile / glisse dans jquery mobile

Comment faire défiler jusqu’au milieu (50%) de la page

Sans utiliser le populaire plugin scrollTo, comment puis-je faire défiler jusqu’au milieu vertical (50%) de la page / div?

Cela fait défiler le défilement interne d’une div jusqu’à sa moitié verticale 

var myDiv = $("#yourdiv"); var scrollto = myDiv.offset().top + (myDiv.height() / 2); myDiv.animate({ scrollTop: scrollto});

JQuery – saute au vert / hori au milieu du défilement-div

verticale 

 $("#centralize-ver").click(function(){//centralize vertical var scrollableDivJ=$("#scroll-div"); scrollableDivJ.scrollTop("1000000");//scroll to max var scrollHeight=scrollableDivJ.prop("scrollHeight"); var diff=(scrollHeight-scrollableDivJ.scrollTop())/2; var middle=scrollHeight/2-diff; scrollableDivJ.scrollTop(middle); });

horizontal 

 $("#centralize-hor").click(function(){//centralize horizontal var scrollableDivJ=$("#scroll-div"); scrollableDivJ.scrollLeft("1000000");//scroll to max var scrollWidth=scrollableDivJ.prop("scrollWidth"); var diff=(scrollWidth-scrollableDivJ.scrollLeft())/2; var middle=scrollWidth/2-diff; scrollableDivJ.scrollLeft(middle); });

Remplacez “# scroll-div” par votre div. “body” ne fonctionne pas pour moi.

jsfiddle

C’est la seule solution qui fonctionne correctement pour moi. En fait, c’est une solution de 2h-try’n’error qui fait assez bien son travail. Peut-être que quelqu’un pourrait expliquer pourquoi scrollTop n’atteint jamais la valeur de prop (“scrollheight”) et que le calcul écrit de diff et middle est nécessaire.