html - 使用 CSS 链接到顶部和底部
问题描述
有人能告诉我什么是创建链接以在页面上跳转的好方法吗?
我已经有一个用于 to-go-top 并且工作得很好,但是在为 to-go-bottom 创建一个时我遇到了一些麻烦。
这就是我想要做的(显然我对底部有不同的图像):
<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
);
});
});
出于某种原因,我无法让第二个按钮出现在屏幕上。如果有人能告诉我更好的方法或告诉我的错误在哪里,我将不胜感激
提前致谢。
解决方案
编辑:
单击按钮不起作用,因为您已将 scrollTop 设置为 0。如果将其更新为页面的高度,它会起作用。这是一个带有可滚动页面的更新小提琴:http: //jsfiddle.net/twvn1z3s/7/
假设这是你的整个 CSS - 你需要对你的 CSS 做一些小的调整。例如,您定义:
.cd-top.cd-is-visible
您设置opacity
/visibility
的位置,但不是bottom
按钮。
将旧规则修改为:
.cd-top.cd-is-visible,
.cd-bottom.cd-is-visible{
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
它会出现。一旦底部按钮可见,您需要调整按钮的位置,使它们不重叠(因为它们的偏移量都设置为导致轻微重叠的值) - 我在这里设置为 30%:http ://jsfiddle.net/twvn1z3s/2/
推荐阅读
- c++ - 原子
与字长对齐 - reactjs - react-google-maps HeatmapLayer:无法读取未定义的属性“地图”
- sql - 检查更新的记录是否是触发器中表的最后一条记录
- javascript - 无法将图像作为表格添加到 javascript
- html - 导航栏中的项目对齐
- javascript - 将 textarea 中的内容导出到 Html 在 Internet Explorer 11 上不起作用
- .net - 在 VB.net 中使用 TreeListView
- powershell - 在高级 PowerShell 函数中声明多个别名
- c++ - 对 std::unique 实现感到困惑?
- c - 用 strtok 取行中的最后一个单词