谁能告诉我什么是创建跳转到页面的链接的好方法?
我已经有了一个to-go-top,并且工作正常,但在创建to-go- but的时候,我遇到了一些麻烦。
这就是我想要做的(显然我对底部的图像有一个不同的图像):
<a href="#Top" name="Top" id="Top" class="cd-top cd-is-visible cd-fade-out" >Top</a>
<a href="#Bot" name="Bot" id="Bot" class="cd-bottom cd-is-visible cd-fade-out">Bottom</a>
这是我正在使用的CSS:
/******************** Back to top and/or bottom ********************/
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
top: 45%;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #03a400 url(images/cd-top-arrow.svg) no-repeat center 50%;
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: 63;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
/* opacity: .5; */
}
.cd-top:hover {
background-color: #489148;
opacity: 1;
}
.cd-bottom {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 45%;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: #03a400 url(images/cd-bottom-arrow.png) no-repeat center 50%;
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;
}
下面是我正在使用的Javascript:
;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');
//grab the "back to bottom" link
$back_to_bottom = $('.cd-bottom');
//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
);
});
//hide or show the "back to bottom" link
$(window).scroll(function(){
( $(this).scrollBottom() > offset ) ? $back_to_bottom.addClass('cd-is-visible') : $back_to_bottom.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollBottom() > offset_opacity ) {
$back_to_bottom.addClass('cd-fade-out');
}
});
//smooth scroll to bottom
$back_to_bottom.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
由于某种原因,我不能让第二个按钮出现在screen.If上。有人可以告诉我一个更好的方法,或者告诉我哪里出了错,我会非常感激的
提前谢谢。
https://stackoverflow.com/questions/50807061
复制相似问题