상단 플러그인으로의 jquery 부드러운 스크롤 정보

이 글에서는 주로 jquery를 기반으로 한 상위 플러그인에 대해 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

창 상단으로 부드럽게 스크롤하려면 고정 버튼을 클릭하세요. 이 기능은 그림과 같이 프런트 엔드 개발에서 매우 일반적입니다.

키 코드:

$.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 });

관련 권장 사항:

js는 스크롤 막대를 제어하여 상단으로 천천히 스크롤 구현 code_javascript Skills

jquery 상단 하단으로 스크롤 code_jquery

JS 상단 예시 공유로 돌아가기

위 내용은 상단 플러그인으로의 jquery 부드러운 스크롤 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!