当用户转到HTML文档中的位置时，我想让对象可见
当用户滚动到底部（或在网址栏上键入＆＃39; pagename.html＃bottom＆＃39;）时，应显示底部<div>。如何使用html，css和javascript编写代码？
这是一个示例页面
<div id="top">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="bottom" style="visibility:hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
答案 0 :(得分：0)
<强>解释
window.location.hash从网址中选择哈希值的数据
html#bottom。只需获取#bottom。document.querySelector('#bottom') window.onload = function() {
document.querySelector("'" + window.location.hash + "'").style.visibility = 'visible';
}
答案 1 :(得分：0)
首先，你的身体应该是可滚动的。
您可以通过设置溢出属性
来实现它 $('body').scroll(function(event) {
if($('#bottom').offset().top < window.innerHeight) {
$('#bottom').css('visibility', 'visible');
}
});
现在检查元素在视口中是否可见。
您必须使用滚动事件。 滚动主体时会触发滚动事件。
window.addEventListener('scroll', function(e) {
if(document.getElementById('bottom').offsetTop < window.innerHeight) {
document.getElementById(bottom).style.visibility = 'visible';
}
}
Javascript：
using System;
using System.Collections;
using System.Collections.Generic;
using System.IO.Ports;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;
class Pt340
{
private bool _isConnected = false;
public SerialPort ComPort = new SerialPort
{
BaudRate = 19200,
Parity = Parity.Odd,
StopBits = StopBits.One,
DataBits = 7,
ReadTimeout = 500
};
private Dictionary<string, string> _status = new Dictionary<string, string>();
public void Open()
{
try
{
_isConnected = true;
ComPort.Open();
}
catch (Exception ex)
{
MessageBox.Show("Connection fail!");
MessageBox.Show(ex.ToString());
_isConnected = false;
}
}
public void CLose()
{
_isConnected = false;
if(ComPort.IsOpen)
ComPort.Close();
}
private void _command(string str)
{
_status = new Dictionary<string, string>();
int temp = (int)str[0];
_status.Add("RangeHex", temp.ToString("X"));
temp = (int)str[6];
_status.Add("FuncHex", temp.ToString("X"));
// functions
Dictionary<int, ArrayList> functions = new Dictionary<int, ArrayList>();
//dict
for (int i = 0; i < 10; i++)
{
var dictArrayList = new ArrayList();
Dictionary<string, string> nameDict = new Dictionary<string, string>();
Dictionary<string, int[]> desimalDict = new Dictionary<string, int[]>();
Dictionary<string, string[]> unitsDict = new Dictionary<string, string[]>();
Dictionary<string, double[]> mulDict = new Dictionary<string, double[]>();
//temporate variable
string nameTemp = "";
int[] desimalTemp = new int[] { };
string[] unitsTemp = new string[] { };
double[] mulTemp = new double[] { };
int hex = 0x00;
switch (i)
{
case 0:
nameTemp = @"Current A (auto)";
desimalTemp = new int[] { 3 };
unitsTemp = new string[] { "A" };
mulTemp = new double[] { 1.0 };
hex = 0x30;
break;
case 1:
nameTemp = @"Capacitance";
desimalTemp = new int[] { 3, 2, 4, 3, 2, 4, 3, 2 };
unitsTemp = new string[] { "nF", "nF", "uF", "uF", "uF", "mF", "mF", "mF" };
mulTemp = new double[] { 0.000000001, 0.000000001, 0.000001, 0.000001, 0.000001, 0.001, 0.001, 0.001 };
hex = 0x36;
break;
case 2:
nameTemp = @"Diode";
desimalTemp = new int[] { 4 };
unitsTemp = new string[] { "V" };
mulTemp = new double[] { 1.0 };
hex = 0x31;
break;
case 3:
nameTemp = @"Current A (manual)";
desimalTemp = new int[] { 3 };
unitsTemp = new string[] { "A" };
mulTemp = new double[] { 1.0 };
hex = 0x39;
break;
case 4:
nameTemp = @"Frequency / Duty";
desimalTemp = new int[] { 3, 2, 4, 3, 2, 4, 3, 2 };
unitsTemp = new string[] { "Hz", "Hz", "kHz", "kHz", "kHz", "MHz", "MHz", "MHz" };
mulTemp = new double[] { 1.0, 1.0, 1000.0, 1000.0, 1000.0, 1000000.0, 1000000.0, 1000000.0 };
hex = 0x32;
break;
case 5:
nameTemp = @"Voltage";
desimalTemp = new int[] { 4, 3, 2, 1, 2 };
unitsTemp = new string[] { "V", "V", "V", "V", "mV" };
mulTemp = new double[] { 1.0, 1.0, 1.0, 1.0, 0.001 };
hex = 0x3b;
break;
case 6:
nameTemp = @"Ohm";
desimalTemp = new int[] { 2, 4, 3, 2, 4, 3, 2 };
unitsTemp = new string[] { "Ohm", "kOhm", "kOhm", "kOhm", "MOhm", "MOhm", "MOhm" };
mulTemp = new double[] { 1.0, 1000.0, 1000.0, 1000.0, 1000000.0, 1000000.0, 1000000.0 };
hex = 0x33;
break;
case 7:
nameTemp = @"Auto uA current";
desimalTemp = new int[] { 2, 1 };
unitsTemp = new string[] { "uA", "uA" };
mulTemp = new double[] { 0.000001, 0.000001 };
hex = 0x3d;
break;
case 8:
nameTemp = @"Continuity";
desimalTemp = new int[] { 2 };
unitsTemp = new string[] { "Ohm" };
mulTemp = new double[] { 1.0 };
hex = 0x35;
break;
case 9:
nameTemp = @"Auto mA current";
desimalTemp = new int[] { 3, 2 };
unitsTemp = new string[] { "mA", "mA" };
mulTemp = new double[] { 0.001, 0.001 };
hex = 0x3f;
break;
}
nameDict.Add("Name", nameTemp); dictArrayList.Add(nameDict);
desimalDict.Add("Desimal", desimalTemp); dictArrayList.Add(desimalDict);
unitsDict.Add("Unit", unitsTemp); dictArrayList.Add(unitsDict);
mulDict.Add("Mul", mulTemp); dictArrayList.Add(mulDict);
functions.Add(hex, dictArrayList);
}
// status bits from byte 7
_status.Add("Judge", (((int)str[7] & (1 << 3)) != 0 ? true : false).ToString());
_status.Add("Batt", (((int)str[7] & (1 << 1)) != 0 ? true : false).ToString());
_status.Add("OL", (((int)str[7] & (1 << 0)) != 0 ? true : false).ToString());
if ((((int)str[7] & (1 << 2)) != 0))
_status.Add("Sign", "-");
else
_status.Add("Sign", "");
//bit 8
_status.Add("Max", (((int)str[8] & (1 << 3)) != 0 ? true : false).ToString());
_status.Add("Min", (((int)str[8] & (1 << 2)) != 0 ? true : false).ToString());
_status.Add("Rel", (((int)str[8] & (1 << 1)) != 0 ? true : false).ToString());
//bit 9
_status.Add("UL", (((int)str[9] & (1 << 3)) != 0 ? true : false).ToString());
_status.Add("Pmax", (((int)str[9] & (1 << 2)) != 0 ? true : false).ToString());
_status.Add("Pmin", (((int)str[9] & (1 << 1)) != 0 ? true : false).ToString());
//bit 10
_status.Add("DC", (((int)str[10] & (1 << 3)) != 0 ? true : false).ToString());
_status.Add("AC", (((int)str[10] & (1 << 2)) != 0 ? true : false).ToString());
_status.Add("Auto", (((int)str[10] & (1 << 1)) != 0 ? true : false).ToString());
_status.Add("VAHz", (((int)str[10] & (1 << 0)) != 0 ? true : false).ToString());
// bit 11
_status.Add("VBar", (((int)str[11] & (1 << 1)) != 0 ? true : false).ToString());
_status.Add("Hold", (((int)str[11] & (1 << 1)) != 0 ? true : false).ToString());
_status.Add("LPF", (((int)str[11] & (1 << 0)) != 0 ? true : false).ToString());
//
if (functions.ContainsKey((int)str[6]))
{
var v = (Dictionary<string, string>)functions[(int)str[6]][0];
_status.Add("Function", v["Name"]);
int rangeIndex = (int)str[0] - 48;
//unit
string unit = "";
try
{
var v2 = (Dictionary<string, string[]>)functions[(int)str[6]][2];
unit = v2["Unit"][rangeIndex];
}
catch (Exception)
{
unit = "?";
}
//decimal
int dec;
try
{
var v3 = (Dictionary<string, int[]>)functions[(int)str[6]][1];
dec = v3["Desimal"][rangeIndex];
}
catch (Exception)
{
dec = 0;
}
//mul
double mul=0.0;
try
{
var v4 = (Dictionary<string, double[]>)functions[(int)str[6]][3];
mul = (double)v4["Mul"][rangeIndex];
}
catch (Exception)
{
mul = 0;
}
_status.Add("Decimal", dec.ToString());
_status.Add("Unit", unit.ToString());
if (_status["Function"] == "Frequency / Duty")
if (_status["Judge"] == "True")
_status["Function"] = "Frequency";
else
_status["Function"] = "Duty";
_status.Add("Division", Math.Pow(10, dec).ToString());
_status.Add("RawNumber", _status["Sign"] + str.Substring(1, 5));
Double.TryParse(str.Substring(1, 5), out double number);
number = number / Math.Pow(10, dec);
_status.Add("Digits", number.ToString());
if (_status["Sign"] == "-")
_status["Digits"] = (-number).ToString();
_status.Add("Measurement", _status["Digits"] + _status["Unit"]);
if (_status["OL"] == "True")
{
_status["OL"] = "OL";
_status["Digits"] = "0";
}
Double.TryParse(_status["Digits"], out double num);
_status.Add("Value", (num * mul).ToString());
}
}
public string GetValue() { return _status["Value"]; }
public string GetMeasurement() { return _status["Measurement"]; }
public string GetFunction(){return _status["Function"];
}
public void Translate()
{
_command(ComPort.ReadLine());// Exception here
}
}
答案 2 :(得分：0)
使用jquery的解决方案;
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("#bottom").hide();
console.log( "ready!" );
});
document.onscroll = function() {
if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
{
console.log("scrolled");
alert("scrolled to bottom");
$("#bottom").show();
}
}
</script>
</head>
<body>
<div id="top">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
</div>
<div >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. I am the last statement before reaching bottom.
</P>
</div>
<div id="bottom">
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. i am in the bottom.
</P>
</div>
</body>
</html>