当用户滚动时，滚动链接变为顶部链接

-1

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

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'); 
    } 
});

来源

2016-08-28 iamdanmorris

如果你的问题是雪佛龙没有改变，那么仔细看看你的JavaScript代码，特别是你的if和else块的第二行。 –

@LukeK这是人字形不会重置为倒V形。事实上，整个链接消失，并没有出现在屏幕上。 – iamdanmorris

我决定测试了这一点，这是一个相当简单的修复。

这是你的代码，因为它是之前我做了一些小的变化

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

它现在都工作正常。 Here's a codepen of the working code

注意，因为它要在10px的从上方触发你还需要改变5至10

来源

2016-08-28 09:22:32

虽然有效，但当页面位于页面顶部时，它仍会消失。有没有编码同一链接的两个版本的方法。一个出现在0px，然后在页面滚动10px时更改为另一个？当页面回到0px时，它会改回来？ – iamdanmorris

你可以编写两个不同的版本，但是当你只改变一个版本时似乎没有必要。我无法复制链接在页面顶部消失。你使用的是什么浏览器？是否有其他代码可能会干扰它？最糟糕的是，雪佛龙没有适当地改变，但这是因为滚动监听器没有被触发，当你跳到一个部分 –

那么我如何编码雪佛龙下来发送页面和雪佛龙发送翻页？这是我似乎无法做到的？ – iamdanmorris

使用此jQuery代码有没有滚动与类搞乱的功能。

第一部分操纵雪佛龙，第二部分操作单击时滚动。

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

来源

2016-08-28 10:05:18 VGal

当用户滚动时，滚动链接变为顶部链接

回答

相关问题