À propos du défilement fluide de jquery vers le plug-in supérieur

Cet article présente principalement en détail le défilement fluide vers le plug-in supérieur basé sur jquery. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Cliquez sur un bouton fixe pour faire défiler en douceur vers le haut de la fenêtre. Cette fonction est assez courante dans le développement front-end, comme le montre la figure :

<.>Code clé :

$.fn.scrollTo = function(options) { 
  var defaults = { 
    toT: 0, //滚动目标位置 
    durTime: 500, //过渡动画时间 
    delay: 30, //定时器时间 
    callback: null //回调函数 
  }; 
  var opts = $.extend(defaults, options), 
    timer = null, 
    _this = this, 
    curTop = _this.scrollTop(), //滚动条当前的位置 
    subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 
    index = 0, 
    dur = Math.round(opts.durTime / opts.delay), 
    smoothScroll = function(t) { 
      index++; 
      var per = Math.round(subTop / dur); 
      if (index >= dur) { 
        _this.scrollTop(t); 
        window.clearInterval(timer); 
        if (opts.callback && typeof opts.callback == 'function') { 
          opts.callback(); 
        } 
        return; 
      } else { 
        _this.scrollTop(curTop + index * per); 
      } 
    }; 
  timer = window.setInterval(function() { 
    smoothScroll(opts.toT); 
  }, opts.delay); 
  return _this; 
}; 
 
//调用 
 $("body").scrollTo({ toT: 0 });

Recommandations associées :

barre de défilement du contrôle js pour faire défiler lentement vers le haut de l'implémentation code_javascript compétences

jquery faire défiler vers le haut en bas code_jquery

JS revenir en haut du partage d'exemples

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!