> 웹 프론트엔드 > JS 튜토리얼 > requireJS를 사용하여 맨 위로 돌아가기 기능 추가

requireJS를 사용하여 맨 위로 돌아가기 기능 추가

php中世界最好的语言
풀어 주다: 2018-04-17 13:56:21
원래의
1383명이 탐색했습니다.

이번에는 requireJS를 사용하여 맨 위로 복귀 기능을 추가하고 requireJS를 사용하여 맨 위로 복귀 기능을 추가할 때의 Notes를 소개하겠습니다.

이 문서의 예에서는 맨 위로 돌아가기 기능을 구현하기 위한 requireJSmodularity 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

견적 요청Js

<script src="require.js" data-main="main"></script>
로그인 후 복사

HTML 부분




  
  
  
  <script src="require.js" data-main="main"></script>

  

로그인 후 복사

새로운 main.js 만들기

require.config({
  paths:{
    jquery:'jquery'
  }
});
requirejs(['jquery','backtop'],function($,backtop){
  $('#top').backtop({
    mode:"move",
    pos:100,
    dest:500,
    speed:20000
  })
});
로그인 후 복사

백탑 모듈 backtop.js

/**
 * Created by Administrator on 2016/3/24.
 */
define(["jquery","scrollTo"],function($, scroll){
  function backtop(el,opts){
    this.opts = $.extend({},backtop.default,opts);
    this.$el = $(el);
    this.scroll = new scroll.scrollTo({
      dest:this.opts.dest,
      speed:this.opts.speed
    });
    this._checkPostion();
    if(this.opts.mode == "move"){
      this.$el.on("click", $.proxy(this._move,this))
    }else{
      this.$el.on("click", $.proxy(this._go,this))
    }
    $(window).on("scroll", $.proxy(this._checkPostion,this))
  };
  backtop.prototype._move = function(){
    this.scroll.move()
  };
  backtop.prototype._go = function(){
    this.scroll.go()
  };
  backtop.prototype._checkPostion = function(){
    if($(window).scrollTop() > this.opts.pos){
      this.$el.fadeIn();
    }else{
      this.$el.fadeOut();
    }
  }
  $.fn.extend({
    backtop:function(opts){
      return this.each(function(){
        new backtop(this,opts);
      })
    }
  });
  backtop.default = {
    mode:"move",
    pos:100,
    dest:0,
    speed:800
  }
  return{
    backtop:backtop
  }
})
로그인 후 복사

만들기 백탑은 scrollTo 모듈에 따라 다릅니다

ScrollTo.js 만들기

define(['jquery'],function($){
  function scrollTo(opts){
    this.opts = $.extend({},scrollTo.DEFAULTS,opts);
    this.$el = $("html,body");
  }
  scrollTo.prototype.move = function(){
    if($(window).scrollTop() != this.opts.dest){
      //if(!this.$el.is(":animated")){
        this.$el.animate({scrollTop:this.opts.dest},this.opts.speed);
      //}
    }
  };
  scrollTo.prototype.go = function(){
    this.$el.scrollTop(this.opts.dest)
  };
  scrollTo.DEFAULTS = {
    dest:0,
    speed:800
  };
  return {
    scrollTo:scrollTo
  }
});
로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

clipboard.js로 복사 기능을 구현하는 단계에 대한 자세한 설명

JS 객체 지향 사용에 대한 자세한 설명

위 내용은 requireJS를 사용하여 맨 위로 돌아가기 기능 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿