LoginSignup
0
0

More than 5 years have passed since last update.

jsのスムーススクロール

Last updated at Posted at 2016-11-08

ieで動かないときがある

動かないコード

$('document,body').animate({'scrollTop':self.target[index]},450,'swing');

動くコード

$('html,body').animate({'scrollTop':self.target[index]},450,'swing');

self.target[index]のところはスクロール先のDOMの位置に置き換えてください。
因みに、自分の書いた元コードは以下になります。
自分が描いたやつなんで、動かなかったらコメントよろしくお願いします。

var pageLink = {
    init: function () {
        this.setParam();
        this.bindEvent();
    },
    setParam: function(){
        this.$link = $('.anc');
        this.target = [];
                this.$window = $(window);
        if(this.$link.length > 0){
            this.setPosition();
        }
    },
    bindEvent: function(){
        var self = this;
        this.$link.click(function(){
            self.scrollAnime(self.$link.index(this));
            return false;
        });
        this.$window.resize(function(){
            if(self.$link.length > 0){
                self.setPosition();
            }
        });
    },
    scrollAnime: function(index){
        var self = this;
        $('html,body').animate({'scrollTop':self.target[index]},450,'swing');
    },
    setPosition: function(){
        for (var i = 0; i < this.$link.length; i++) {
            this.target[i] = $(this.$link.eq(i).attr('href')).offset().top;
        }
    }
};

ページ内リンクにクラスをつけて、pageLink.init()すれば動きます。
これをそのままコピペしてました。

追記
慌てて作成したので、プログラム部分が間違っていました。
編集したので、使えるようになってます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0