Javascript 为什么我的旋转木马会在用户交互中占据上风？

我在我的单页网站上制作了一个旋转木马，展示了我的一些摄影作品。我遇到的问题是，每当我点击其中一个箭头进入下一张图片——左或右，我都会立即被抓拍到页面顶部

我已经检查了CSS和JS，我似乎找不到任何原因来解释为什么会发生这种情况

HTML:

JS:

.exploration {
    height: 1100px;
    background-color: #ffffff;
}

.exploration .container {
    position: relative;
    top: 35px;
    width: 1200px;
}

.exploration h3 {
  color: #313131;
  font-size: 40px;  
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  padding-bottom: 20px;
  text-align: center;
}

.exploration p {
    color: #313131;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-align: center;
}


.slider {
  position: relative;
  top: 50px;  
  width: 100%;
  height: 800px;
}

.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.active-slide {
    display: block;
}

/* Slide feature */

.slide-feature { 
    text-align: center;
    height: 800px;
}

.slide-feature-1 {
  background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
  background-position: center;
}

.slide-feature-2 {
  background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
  background-position: center;
}

.slide-feature-3 {
  background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
  background-position: bottom;
}

.slide-feature-4 {
  background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
  background-position: center;
}

.slide-feature-5 {
  background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
  background-position: center;  
}

.slide-feature img {
  margin-top: 112px;
  margin-bottom: 28px;
}

.slider-nav {
  text-align: center;
  margin-top: 20px;
}

.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
  position: relative;
  top: 40px;
}

.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
  position: relative;
  top: 40px;
}

.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  position: relative;
  top: 40px;
}

.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}

.slider-dots li.active-dot {
  color: #7FCCE5;
}

var main = function() {
$('.dropdown-toggle').click(function() {
    $('.dropdown-menu').toggle();

});
//Next Arrow Functionality    
$('.arrow-next').click(function() {

    var currentSlide=$('.active-slide');
    var nextSlide=currentSlide.next();
    var currentDot=$('.active-dot');
    var nextDot=currentDot.next();

    if (nextSlide.length == 0) {
        nextSlide=$('.slide').first();
        nextDot=$('.dot').first();
    }

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {

    var currentSlide=$('.active-slide');
    var prevSlide=currentSlide.prev();

    var currentDot=$('.active-dot');
    var prevDot=currentDot.prev();

    if(prevSlide.length == 0) {
        prevSlide=$('.slide').last(); 
        prevDot=$('.dot').last();
    }


    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');

    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

    });


//Load Jumbotron text on page open.
$("#test h1").addClass("load");

};

$(document).ready(main);

---

您需要添加

e.preventDefault（）到您的onlick函数

检查

编辑
正如我刚才在评论部分所评论的，是
href=“#”
导致页面跳转到顶部。因此，从技术上讲，如果删除achor标记
e.preventDefault（）不是必需的。但最好保留它。
在单击回调函数中添加一个参数（e），然后使用以下行阻止默认的post（带有href set的锚定标记有）：

e.preventDefault();

像这样：

        //Next Arrow Functionality
        $('.arrow-next').click(function (e) {

            var currentSlide = $('.active-slide');
            var nextSlide = currentSlide.next();
            var currentDot = $('.active-dot');
            var nextDot = currentDot.next();

            if (nextSlide.length == 0) {
                nextSlide = $('.slide').first();
                nextDot = $('.dot').first();
            }

            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');

            currentDot.removeClass('active-dot');
            nextDot.addClass('active-dot');

            e.preventDefault();
        });
        //Previous Arrow Click Functionality
        $('.arrow-prev').click(function (e) {

            var currentSlide = $('.active-slide');
            var prevSlide = currentSlide.prev();

            var currentDot = $('.active-dot');
            var prevDot = currentDot.prev();

            if (prevSlide.length == 0) {
                prevSlide = $('.slide').last();
                prevDot = $('.dot').last();
            }


            currentSlide.fadeOut(600).removeClass('active-slide');
            prevSlide.fadeIn(600).addClass('active-slide');

            currentDot.removeClass('active-dot');
            prevDot.addClass('active-dot');
            e.preventDefault();
        });

非常感谢你。我查看了e.preventDefault，得到了这样的描述：“如果调用此方法，则不会触发事件的默认操作。”。那么，根据这个定义，什么是导致问题的默认操作，以便我将来可以知道？href=“#”导致页面跳转到top@R4nc1d总结得很完美，+1对于你的小提琴，我有点懒：）
        //Next Arrow Functionality
        $('.arrow-next').click(function (e) {

            var currentSlide = $('.active-slide');
            var nextSlide = currentSlide.next();
            var currentDot = $('.active-dot');
            var nextDot = currentDot.next();

            if (nextSlide.length == 0) {
                nextSlide = $('.slide').first();
                nextDot = $('.dot').first();
            }

            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');

            currentDot.removeClass('active-dot');
            nextDot.addClass('active-dot');

            e.preventDefault();
        });
        //Previous Arrow Click Functionality
        $('.arrow-prev').click(function (e) {

            var currentSlide = $('.active-slide');
            var prevSlide = currentSlide.prev();

            var currentDot = $('.active-dot');
            var prevDot = currentDot.prev();

            if (prevSlide.length == 0) {
                prevSlide = $('.slide').last();
                prevDot = $('.dot').last();
            }


            currentSlide.fadeOut(600).removeClass('active-slide');
            prevSlide.fadeIn(600).addClass('active-slide');

            currentDot.removeClass('active-dot');
            prevDot.addClass('active-dot');
            e.preventDefault();
        });