Question

我想在我的网页上添加一个链接，当它首次加载时，用于将页面向下滚动500px。如果页面从顶部滚动10px，我希望该链接成为一个回到顶部的链接。我编写了我认为正确的内容，但链接似乎只链接到顶部。当用户滚动时，它从下行V形符号变为向上V形符号，但是当页面返回到顶部时它不会重置。希望这是有道理的。

HTML

<a class="w-toplink active" href="#"><i class="fa fa-chevron-down"></i></a>

CSS

.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding:12px;
line-height: 48px;
height: 28px;
width: 35px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
opacity:0; 
transition: opacity 200ms ease-in;
}

.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}

.w-toplink:hover {
opacity: 1;
}

.down-link {
    width:100%;
    height:50px;
    position:fixed;
}

#w-downlink i {
    line-height: 42px;
    font-size: 24px;
    color: #fff;
    display: block;
    width: 24px;
    margin: 0 auto;
    margin-top:10px;
}

#w-downlink {
    height: 60px;
    width: 60px;
    background-color: #191919;
    background-color: rgba(20, 20, 20, 0.4);
    position:absolute;
    bottom:0;
    margin-bottom:30px;
    right:0;
    margin-right:20px;
    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
}

.w-downlink:hover {
    height: 60px;
    width: 60px;
    background-color: #191919;
    background-color: rgba(20, 20, 20, 0.4);
    position:absolute;
    bottom:0;
    margin-bottom:30px;
    right:0;
    margin-right:20px;
     cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0.5;
}

.w-toplink

{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
    .w-toplink:hover{opacity:1;}

JQUERY

$(window).scroll(function() {
  var scrollDownLink = $('.w-toplink');
  if ($(window).scrollTop() < 5) {
    scrollDownLink.attr('href', '#about');
    scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
  } else {
    scrollDownLink.attr('href', '#top-anchor');
    scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
  }
});

Answer 1

我决定对此进行测试，这是一个非常简单的修复方法。

在我做一些小改动之前，这是你的代码

$(window).scroll(function() {


var scrollDownLink = $('.w-toplink');
  if ($(window).scrollTop() < 5) {
    scrollDownLink.attr('href', '#about');
    scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
  } else {
    scrollDownLink.attr('href', '#top-anchor');
    scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
  }
});

我将if块更改为

if ($(window).scrollTop() < 5) {
    scrollDownLink.attr('href', '#about');
    scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
  }

现在一切正常。 in_array

请注意，要从顶部以10px触发它，您还需要将5更改为10

Answer 2

使用这个jQuery代码来获得功能，而不会滚动乱搞类。

第一部分操纵V形，第二部分滚动点击。

var scrollDownLink = $('.w-toplink');

$(window).scroll(function() {
    if ($(window).scrollTop() < 10) {
        scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
    } else {
        scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
    }
});

scrollDownLink.click(function() {
    if($(window).scrollTop()>10){
        $('html,body').animate({
            scrollTop:$('#top-anchor').offset().top
        },500);
    }else{
        $('html,body').animate({
            scrollTop:$('#about').offset().top
        },500);
    }
});

用户滚动时滚动链接更改为顶部链接

2 个答案: