下行鏈路更改爲返回頁首鏈接滾動

我在主頁上有一個下行鏈路，當用戶單擊頁面時會將頁面向下移動。我試圖讓用戶從頂部滾動10個像素後立即變回到頂部鏈接，但無法使其工作。有沒有人看到我要去哪裏錯了。另一個不起作用的是平滑滾動jQuery。下行鏈路更改爲返回頁首鏈接滾動

HEAD

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript" src="JQuery/jquery.js"></script> 
<script type="text/javascript" src="JQuery/html5lightbox.js"></script> 
<script type="text/javascript" src="JQuery/counter.js"></script> 
<script type="text/javascript" src="JQuery/smoothscroll.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script type="text/javascript" src="JQuery/script.js"></script>

HTML

<div class="down-link"><a href="#about" id="w-downlink" class="smoothscroll"><i class="ss-navigatedown"></i></a></div>

CSS

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

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

jQuery的使用是在光滑的滾動插頭。

$('.w-downlinkn').click(function() { 
    $('html, body').animate({ scroll: 250 }); 
});

提前感謝您的支持。

來源

2016-08-27 iamdanmorris

請出示您使用的是向下滾動jQuery和展示在包括以下腳本頭部分：jQuery的，smoothScroll，和自定義的jQuery。已更新 – depiction

。謝謝 – iamdanmorris

回答您的平滑滾動的問題：

你需要使用的，而不是「scrollTop的」「滾動」：

$("html, body").animate({ scrollTop: "300px" });

參見： Is it possible to animate scrollTop with jQuery?

要更改滾動鏈接：

$(window).scroll(function() { 
    var scrollDownLink = $('#w-downlink'); 
    if ($(window).scrollTop() < 10) { 
    scrollDownLink.attr('href', '#about'); 
    scrollDownLink.find('i').removeClass('ss-navigateup').addClass('ss-navigatedown'); 
    } else { 
    scrollDownLink.attr('href', '#top-anchor'); 
    scrollDownLink.find('i').removeClass('ss-navigatedown').addClass('ss-navigateup'); 
    } 
}

爲此，您需要添加一個空錨直接在體內的第一個元素：

<body> 
    <a id="top-anchor"></a> 
    ... 
</body>

來源

2016-08-27 17:55:34

下行鏈路更改爲返回頁首鏈接滾動

回答

相關問題