Question

必须有一种方法可以让我的滚动到顶部按钮来处理#footer容器的顶部，只要网站用户向下滚动足够远，以便页脚出现在屏幕上，对吧？现在它想要保持固定在屏幕的左下角 - 这是有道理的，但必须有一种方法来做我想要的，作为一个新手，我似乎无法搞清楚！任何帮助将非常感激。谢谢！

我网站上我们使用按钮的页面：http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout

这是我的剧本：

jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 300,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        offset_opacity = 1200,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 700,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });

});

相关的css：

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: none;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url('litebox-next.png') no-repeat center 50%;
  background-size: 40px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .335;
}

.cd-top:hover {
  background-color: transparent;
  opacity: 1!important;
}

和html：

<a href="#0" class="cd-top">Top</a>

Answer 1

你的目标是让＃34;滚动到顶部＆＃34;按钮可点击它在页脚顶部？因为您需要做的就是将按钮的z-index（CSS属性）设置为100或更高，以使其位于页脚顶部。
如果你想将它移到页脚上方，我相信你可以在$（window）.scroll（）中添加第二个条件，检查scrollTop（）是否接近页面的末尾（通过将它与$（document）进行比较）。 height（）），然后设置按钮＆＃34; bottom＆＃34;价值更高的东西（例如，使用$ back_to_top.css（＆＃34;底部＆＃34;，＆＃34; 200＆＃34;））。

Answer 2

好吧我明白了！这是我所做的，以防任何人遇到类似的问题。我在$（window）.scroll（function（）：

下添加了以下2个if语句

//function to get highest common factor of two numbers (a fraction)
function HCF(u, v) { 
    var U = u, V = v
    while (true) {
        if (!(U%=V)) return V
        if (!(V%=U)) return U 
    } 
}
//convert a decimal into a fraction
function fraction(decimal){

    if(!decimal){
        decimal=this;
    }
    whole = String(decimal).split('.')[0];
    decimal = parseFloat("."+String(decimal).split('.')[1]);
    num = "1";
    for(z=0; z<String(decimal).length-2; z++){
        num += "0";
    }
    decimal = decimal*num;
    num = parseInt(num);
    for(z=2; z<decimal+1; z++){
        if(decimal%z==0 && num%z==0){
            decimal = decimal/z;
            num = num/z;
            z=2;
        }
    }
    //if format of fraction is xx/xxx
    if (decimal.toString().length == 2 && 
        num.toString().length == 3) {
            //reduce by removing trailing 0's
            // '
    decimal = Math.round(Math.round(decimal)/10);
    num = Math.round(Math.round(num)/10);
}
//if format of fraction is xx/xx
else if (decimal.toString().length == 2 && 
        num.toString().length == 2) {
    decimal = Math.round(decimal/10);
    num = Math.round(num/10);
}
//get highest common factor to simplify
var t = HCF(decimal, num);

//return the fraction after simplifying it

if(isNaN(whole) === true)
{
 whole = "0";
}

if(isNaN(decimal) === true)
{
    return ((whole==0)?"0" : whole);
}
else
{
    return ((whole==0)?"0 " : whole+" ")+decimal/t+"/"+num/t;
}
}

检查出来 - 它现在完全符合我的要求！ http://joriebreonn.com/blogs/jb-blog/35009473-its-a-knockout

页脚出现时重新定位滚动到顶部按钮

2 个答案: